Angular

Question

我不明白 child 组件在 Angular 中当数据更改时被破坏的目的。

情况如下：

我有一个 parent 和一个 child 组件：

parent.component.html

<div class="parent-content" (click)="toggleChild()">
   // ...
</div>
<child></child>

通过单击内容，child 将被切换（child 组件将通过动画显示）

parent.component.ts

这里我订阅了我的 parent...

中的 sharedService 数据更改

ngOnInit () {
    let subscription = this.sharedService.myData.subscribe( (data) => {
        this.data = data;
    });
}

.. 以及我的 child（实际上 child 是动态创建组件的包装器，所以准确地说 - 我在我的 grand-child)

child.component.ts

this.resolver.resolveComponent(component).then(factory => {
     let componentRef = this.childContainer.createComponent(factory);
});

grand-child.component.ts

ngOnInit () {
    let subscription = this.sharedService.myData.subscribe( (data) => {
        this.data = data;
    });
}

现在，当 myData 更改（由于服务器响应）时，child 被销毁！我丢失了 grand-child 的所有数据，因为它也被破坏了！

我阅读了有关组件交互的内容 here 但仍然无法弄清楚 ngOnDestroy 何时会被调用，因为我没有任何 @Inputs...

也许我可以在 grand-child 操纵的数据被销毁之前将其存储在其他地方，但关键是我需要此视图保持打开状态和更新 myData对于 parent 和 grand-child。感谢您的帮助！

更新

我注意到 child (grand-child) 共享数据实际上并不重要，但 parent 数据 的纯粹变化导致 child 组件的销毁（或 re-initialization，因为 child 构造函数在销毁后再次调用）。这个问题是怎么解决的？

Answer 1

事实证明@GünterZöchbauer 是对的。我的子组件是在我的父模板顶部的 *ngFor 中，这取决于 myData。当然 *ngFor 在更改后会重新呈现，我的子组件也是如此。我通过将子组件拉出循环并将它们独立放置到应用程序中来重构我的视图，同时仍然从更高级别的组件动态加载它们。由于他们依赖于 sharedService，因此他们仍然可以正确获取数据并在更改后保持打开状态。谢谢！

Angular - Child 组件在数据更改后被销毁，为什么？

Angular - Child component gets destroyed after data change, why?

lifecycle