angular - 如何知道子组件是否已在 Angular 中加载

Question

我有一个包含一堆子组件的父组件。
我想在加载所有组件后执行一些操作。
当所有子组件都加载到 Angular 中时，如何进行回调？
谢谢
附注。我想要一个类似的函数，比如纯 Angular 中 Ionic 的“ionViewDidEnter”。

Answer 1

我会处理如下问题:
声明一个服务

export class ChildComponentsLoadedService () {
  component1LoadedSubject$ = new BehaviourSubject(false)
  component2LoadedSubject$ = new BehaviourSubject(false)
  component3LoadedSubject$ = new BehaviourSubject(false)
  ...
  allComponentsLoaded$ = combineLatest([
    component1LoadedSubject$.asObservable(),
    component1LoadedSubject$.asObservable(),
    component1LoadedSubject$.asObservable(),
    ...
  ]).pipe(
    map(componentsLoaded => componentsLoaded.every(loaded => loaded)),
    filter(loaded => loaded === true)
   )
}

父组件

constructor(private childComponentsLoadedService: ChildComponentsLoadedService) { }

childComponentsLoaded$ = this.childComponentsLoadedService.allComponentsLoaded$;

ngOnInit() {
  this.childComponentsLoaded$.subscribe({
    next: () => {
      // Now all components have loaded here
    }
  })
}

中子 i成分

constructor(private childComponentsLoadedService: ChildComponentsLoadedService) { }
ngOnInit() {
  this.componentiLoadedSubject$.next(true)
}

动态组件
声明一个服务

export class ChildComponentsLoadedService () {
  componentLoadedSubject$ = new BehaviourSubject([false]);
  componentLoadedAction$ = this.componentLoadedSubject$.asObservable()
  allComponentsLoaded$ = this.componentLoadedAction$.pipe(
    filter(component=> component.every(loaded => loaded))
  )
  markComponentAsLoaded(index: number) {
    let currentLoadStatus = [...this.componentLoadedSubject$.value];
    currentLoadStatus[index] = true
    this.componentLoadedSubject$.next([...currentLoadStatus])
  }
}

父组件

constructor(private childComponentsLoadedService: ChildComponentsLoadedService) { }
noOfChildComponents = 14;
ngOnInit() {
  
this.componentiLoadedSubject$.next(Array(this.noOfChildComponents).fill(false));
this.childComponentsLoaded$.subscribe({
    next: () => {
      // Now all components have loaded here
    }
  })
}

子组件

@Input() componentIndex;
constructor(private childComponentsLoadedService: ChildComponentsLoadedService) {}
ngOnInit() {
  
  this.markComponentAsLoaded(componentIndex)
}

该方法使用服务在父组件和子组件之间进行通信