Question

我们有以下要求。

我们在应用程序根目录组件中具有主根目录布局。在此布局中，我们有一个路由器插座，并且使用Angular路由机制将组件注入到路由器插座中。

我们需要将主根布局与注入路由器出口的组件的生命周期事件挂钩。

因为如果我们向路由器事件注册NavigationEnd，则有时会在组件ngOnInit之前调用它。因此，我们知道导航何时结束，但我们不知道组件何时完成工作。理想情况下，我们希望利用组件的生命周期事件。

还要求被注入的组件不能继承特殊类或类似的东西...

这怎么办？

Answer 1

也许您可以创建一个共享服务，通知您何时在生命周期挂钩中调用要调用的组件，例如ngOnInit，ngOnDestroy等。

@Injectable({
  providedIn: 'root'
})
export class LifeCycleHookService{
    private hookSubject = new Subject<any>();
    onHookFired = this.hookSubject.asObservable();


    //  component: Component - Reference to the component
    //  hookType: Enum | string - OnInit, OnDestroy etc.
    fireHook = (component, hookType) => {
      this.hookSubject.next({component, hookType});
    }

}

然后，您可以在父组件中订阅该服务的onHookFired。

@Component(
...
)
export class ParentComponent implements OnInit{
   constructor(private hookService: LifeCycleHookService){}

  ngOnInit(){
    this.hookService.onHookFired.subscribe((event) => {
      // event.component
      // event.hookType
    })
  }
}

然后在子组件中，您可以在生命周期挂钩上通知服务。

@Component(
...
)
export class ChildComponent implements OnInit, OnDestroy{
   constructor(private hookService: LifeCycleHookService){}

  ngOnInit(){
    this.hookService.fireHook(this, 'onInit');
  }

  ngOnDestroy(){
    this.hookService.fireHook(this, 'onDestroy');
  }
}

希望这会给您一个提示。

从父模块角度挖掘组件生命周期事件

1 个答案: