angular - 当 ChildComponent 发生变化时如何监听然后在 ParentComponent 中执行方法？

Question

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

给定一个ParentComponent渲染 a ChildComponent，我需要知道什么时候ChildComponent改变了，然后在ParentComponent.

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

谢谢。

score 3 · Accepted Answer

Prettyfly 的回答接缝可以接受，但可以选择服务。

我觉得这个链接很有描述性。

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

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

只要记住在父组件中提供服务，这样父组件和它的子组件共享同一个服务实例，或者在 app.module 中使其对整个应用程序都是全局的。

服务还支持在父组件、子组件和兄弟组件之间共享双向数据。

编辑：如果您不使用<ng-template>并且动态创建组件，您可以通过将其引用传递给“componentRef”并调用来手动检测其更改componentRef.changeDetectorRef.detectChanges();

score 2 · Accepted Answer

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

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

例如

父组件.html

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

child.component.ts

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

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

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

这仍然适用。只要子组件是控制发出变化的组件，那么任何父组件都可以订阅它，即使是动态添加的。

2 回答 2