Блог

У нас есть следующее требование.

У нас есть основной корневой макет в корневом компоненте приложения. В этой компоновке у нас есть маршрутизатор-розетка, и компоненты вводятся в маршрутизатор-розетку с помощью механизма угловой маршрутизации.

Нам нужно подключиться из главного корневого макета к событиям жизненного цикла компонентов, вводимых в маршрутизатор-розетку.

Потому что, если мы регистрируемся в NavigationEnd событий маршрутизатора, он иногда вызывается перед компонентом ngOnInit. Таким образом, мы знаем, когда заканчивается навигация, но мы не знаем, когда компонент закончил выполнять работу. В идеале мы хотели бы подключаться к событиям жизненного цикла компонента.

Также требуется, чтобы внедряемые компоненты не наследовали специальный класс или что-то в этом роде…

Как это можно сделать?

Возможно, вы можете создать общую службу, о которой вы сообщаете, когда нужные компоненты вызываются в перехватах жизненного цикла, таких как 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');
  }
}
  

Надеюсь, это даст вам подсказку.