Angular 子组件创建的 init hook 在生命周期的什么时候？

Question

在我的组件模板中，我有一堆子组件。一开始，我想对其中一个执行命令。如图所示获取对他们的引用，包括我尝试与他们交谈的不同步骤。

@ViewChildren(SubComponent) subs: QueryList<SubComponent>;

constructor(...) { console.log("constructed " + this.subs); }
ngOnInit()       { console.log("inited      " + this.subs); }

ngAfterContentInit()    { console.log("content init    " + this.subs); }
ngAfterContentChecked() { console.log("content checked " + this.subs); }
ngAfterViewInit()       { console.log("view init       " + this.subs.length); }
ngAfterViewChecked()    { console.log("view checked"     + this.subs.length); }

我面临的问题是我在每次通话中（在第一个运行上）要么一无所获，要么一无所获。最后，在 ngXxxChecked() 的一些零和零之后，我得到了结果并可以对其做出反应。

但是，反应应该只发生第一次潜艇是存在的。上面的方法每次用户与页面交互时都会这样做。

一种解决方案是为操作设置超时。这是一个非常丑陋的 hack，优秀的程序员会为此下地狱。另一个我能想到的是设置一个标志，只有在没有设置的情况下才执行我的操作。这是一个丑陋的 hack（我们说的不是地狱，而是炼狱）。

如果我想去天堂，那里源代码自由漫游，bug 自我毁灭，我该怎么办？

Answer 1

我的解决方案是让子组件公开一个事件，该事件在 ngOnInit 内发出自己的实例。然后父组件可以侦听该事件并在实例可用时获取该实例。这是一些基本代码：

子组件

export class SubComponent implements OnInit{
  @Input() name:string;
  @Output() init = new EventEmitter<SubComponent>();

  ngOnInit(){
    this.init.emit(this);
    this.init.complete();
  }
}

父组件模板

<sub-cmp *ngFor="let d of data" [name]="d" (init)="onSubInit($event)"></sub-cmp>

父组件 class:

onSubInit(sub:SubComponent){
  console.log(sub);
}

现在，在父组件的 onSubInit 中，您有一个子组件的实例可以为所欲为。

Live demo

See the docs.

Angular 子组件创建的 init hook 在生命周期的什么时候？

When in the life cycle is the init hook for subcomponents' creation in Angular?

hook

lifecycle

typescript

angular