通过 JSON 更新 Angular 动态组件

Posted 2023-03-13

【中文标题】通过 JSON 更新 Angular 动态组件

【英文标题】：Update Angular dynamic components through JSON

【发布时间】：2019-02-14 17:46:01

【问题描述】：

我在我的应用程序中使用 angular 5，在我的应用程序中我创建了各种嵌套的动态组件，这种嵌套可以达到 4 级。例如

<GP-Component>
    <parentCOmponent>
        <component>
            <sub-component></sub-component>
        </component>
    </parentCOmponent>
</GP-Component>

实际上它看起来像：

<GP-Component>
<parentCOmponent>
    <component>
        <div>
            <div addSubComponent [config]="fewCOnfiguration"></div>
        </div>
    </component>

    //@ comp-2
    <component>
        <div>
            <div addSubComponent [config]="fewCOnfiguration"></div>
        </div>
    </component>

    //@ comp-3
    <component>
        <div >
            <div addSubComponent [config]="fewCOnfiguration"></div>
        </div>
    </component>

    //@ compo-4
    <component>
        <div>
            <div addSubComponent [config]="fewCOnfiguration"></div>
        </div>
    </component>

    //@ compo-5
    <component>
        <div>
            <div addSubComponent [config]="fewCOnfiguration"></div>
        </div>
    </component>
</parentCOmponent>

我通过 JSON 维护数据，所以当我最初传递 JSON 时，它会根据 JSON 中定义的属性创建所有内容，一切正常，但现在我应该在用户 A 的某个时间间隔后向用户 B 显示更新进行更改。

我的问题是我可以更新 JSON 并且也可以在父级别更新，但是如何使用更新的 JSON 来显示更改，因为我创建的所有内容都是动态的。

【参考方案1】：

所以我得到了解决方案（感谢我的一位同事），他几天前在我的鞋子里，我正在写答案如果有人看起来相似或如果可以进一步改进它。

答案：

当我需要更新数据并在获取新数据时将其显示给用户 B（某种自动更新）时，我将新数据设置到服务中并：

this.ngOnDestroy();
//@ set data into a service
this.container.clear(); //@ container holding dynamic components
this.ngOnInit();

它工作正常。我只是担心我正在使用轮询从服务器获取数据以每 10 秒显示一次用户 B 更新，所以我将在一分钟内运行 6 次 ngOnInit 循环，我不确定这是否会变得昂贵执行，因为运行 ngOnInit 将重置所有内容，并且所有嵌套组件都将重新初始化。

期待有人提出更好的优化建议（除了将轮询时间缩短到 25-35 秒）

谢谢