Question

我在Angular 7中寻找一种干净有效的解决方案，以在每次子组件发生更改时在组件中执行一种方法。

鉴于ParentComponent呈现了ChildComponent，我需要知道ChildComponent何时被更改，然后在ParentComponent中执行该功能。

通过更改，我指的是视图或Child类中任何属性的更改。

谢谢。

Answer 1

Prettyfly's answer接缝可以接受，但是可以选择一种服务。

我发现此link非常具有描述性。

在服务中创建一个observable（例如RXJS's subject）并在您的父组件处订阅它，以便跟踪其更改并相应地进行处理。

在动态创建的组件上，在onChanges生命周期挂钩或任何基于操作的函数中，您都可以触发可观察对象以发出更改（然后，父/任何其他订阅者将通过订阅来“监听”）

请记住要在父组件中提供服务，以使父及其子对象共享同一服务实例，或者在app.module中提供该服务实例，以使其在整个应用程序中都具有全局性。

服务还允许在父，子和同级组件之间共享投标数据。

编辑：如果您不使用<ng-template>并且动态创建了组件，则可以通过将其引用传递给'componentRef'并调用componentRef.changeDetectorRef.detectChanges();

来手动检测其更改。

Answer 2

在子组件中创建一个EventEmitter，并在其更改时发出。

从父组件的模板中订阅事件发射器，并在每次发射时执行函数。

例如

parent.component.html

<child-component (changeEmitter)="executeParentFunction()"> </child-component>

child.component.ts

@Output() changeEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

ngOnChanges() {
    this.changeEmitter.emit(true);
}

动态提供ChildComponent，并且不能选择@Input。它对子组件必须是透明的。

这仍然适用。只要子组件是控制更改发生的组件，那么任何父级都可以订阅它，即使动态添加也是如此。