угловое нажатие на события жизненного цикла компонента из родительского модуля - PullRequest
Новая
       13

угловое нажатие на события жизненного цикла компонента из родительского модуля

0 голосов
/ 22 марта 2019

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

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

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

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

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

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

1 Ответ

0 голосов
/ 22 марта 2019

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

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

...