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

在Child2Component中，updatedSelectedText在ngOnInit中被调用，该方法仅被调用一次-初始化组件时。有两种解决方法：
- 通过为@Input()使用setter / getter
- 使用NgOnChanges生命周期挂钩

注意：setter和ngOnChanges都在ngOnInit之前被调用，因此您可以避免使用此钩子

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

看看Stackblitz

Answer 2

为什么不将“ child2”传递给onEmitEvent并调用函数updateSelectedText（）？

也就是说，您更改了app.component.html

<!--see that use a template reference variable "#child2", and pass as
    argument to update function -->
<app-child1 (onEmit)="update($event,child2)" [data]="jsondata"></app-child1>
<app-child2 #child2 [data]="jsondata.AdDimensionsMaster"></app-child2>

在app.component.ts的更新功能中，只需调用该功能

//get the "child2" as "any"
update(event: any,child2:any) {
    this.jsondata.AdDimensionsMaster[event].Selected = true;
    this.jsondata.isactive = true;
    child2.updatedSelectedText() //<--call the function
}

强制Angular子组件完全渲染

2 个答案: