Angular 生命周期 Hook 组件外部

Question

我们正在寻找一种方法来注册或监听通过路由加载的组件外部的 Angular 生命周期 Hook 。

现在，组件必须实现 AfterContentInit、AfterViewInit、OnInit 等接口(interface)才能挂接到生命周期...

我们希望能够 Hook 到路由组件外部的生命周期事件。原因是我们正在构建一个我们不想为所有组件强制执行基类的框架。

这可能吗？

Answer 1

当然，这是可以的，你可以通过ViewChild()和Output()来共同控制子组件。

您无需实现 Angular 生命周期，因为您可以手动控制操作。这是您可以从 app.component 执行的操作的示例:

在 html 中，您将拥有像这样的子组件:

<app-child #refChild (onStateChange)="execParentFunc($event)"></app-child>

在 ts 中很简单:

@ViewChild('refChild') myChildComponent: any;

然后你就可以从你的父级执行函数了

this.myChildComponent.childFunction();

最后，您还可以使用 Output() 捕获子项的更改

childFunction() {
    // process things...
    let newValue = 'something';
    this.onStateChange.emit(newValue); 
}

==> 这将运行你的 execParentFunc($event) where $event = newValue in this case