javascript - 强制 Angular 子组件完全渲染

Question

我有以下Stackblitz .

当我更新子数据源时，它没有完全呈现，以下方法没有被调用，

 updatedSelectedText() {
    this.SelectedData = "";
    console.log(this.data);
    this.data.forEach(el => {
      if (el.Selected) this.SelectedData += el.Text;
    });
  }

我可以让它调用

ngDoCheck() {
    // this.updatedSelectedText();
  }

但在实际项目中，我编写了很多复杂的逻辑，我不想调用 ngDoCheck 方法。

有没有办法强制子组件完全渲染

我尝试了ChangeDetectionStrategy，但这不起作用。

Answer 1

1. 在 Child2Component 中，updatedSelectedText 方法在 ngOnInit 中调用，该方法仅调用一次 - 当组件初始化时。有两种方法可以解决:
   • 通过使用 @Input() 的 setter/getter
   • 通过使用 NgOnChanges 生命周期 Hook

注意:setter 和 ngOnChanges 都会在 ngOnInit 之前调用，这样你就可以避免这个钩子(Hook)

在 AppComponent 中，update 方法应该更新 jsondata 对象，而不是更改单个属性

看看Stackblitz