强制 Angular 子组件完全呈现

Question

我有以下堆栈闪电战。

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

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()
   • 通过使用NgOnChanges生命周期挂钩

注意：二传手和ngOnChanges在ngOnInit之前都会被调用，所以你可以避免这个钩子

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

看看斯塔克闪电战

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
}