初始化所有孩子后的Angular 2生命周期钩子？

Question

我正在寻找一个概念来实现以下案例：

我有一个父搜索组件，它有一些组件作为视图子项/内容子项，用于显示构面和搜索结果。我现在想在应用程序完成加载后触发搜索，这样用户就不会看到空白页面。

我现在的问题是找不到适合我需要的生命周期挂钩。构面/搜索结果订阅各自 ngOnInit 中的搜索结果。所以我需要一个在所有子组件完成初始化之后调用的钩子。

我在父组件上尝试了以下钩子

• ngAfterContentInit：在子级调用 ngOnInit 之前调用它
• ngAfterViewInit：这个可行，但在搜索结果返回后，子视图会更新，这会导致错误，因为在 ngAfterViewInit 中不允许操作视图的操作

任何想法如何解决这个问题？对我来说，我似乎没有掌握这里的基本内容。

干杯

汤姆

Answer 1

我最终通过以下方式使用了 ngAfterViewInit() 钩子：

ngAfterViewInit(){
  //stuff that doesn't do view changes
  setTimeout(_=> this.methodThatKicksOffAnotherRoundOfChanges());
}

与设置实际时间的其他 setTimeout 调用相比，这应该是安全的，因为它应该立即开始（并且只会影响线程/上下文行为）

Answer 2

如果您需要您的父组件等待多个子组件之间的自定义异步行为，那么这是我设计的一个很好的解决方案。

任何异步初始化的子组件都扩展了这个：

import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

export class AsynchronouslyInitialisedComponent {
  loadedState: Subject<boolean> = new Subject<boolean>();
  loadedState$ = this.loadedState.asObservable();
  constructor() {
  }
  protected componentLoaded() {
    this.loadedState.next(true);
  }
}

示例子组件：

import {Component} from '@angular/core';
import {AsynchronouslyInitialisedComponent} from './../base_component';

@Component({
  moduleId: module.id,
  selector: 'child'
})
export class Child extends AsynchronouslyInitialisedComponent {
  constructor() {
    super();
  }
  ngOnInit() {
    //Some async behavoir:
    setTimeout(() => {
      this.componentLoaded();
    }, 10000);
  }
}

现在您的 Parent 组件需要做的事情如下：

import {Component, ViewEncapsulation, ViewChild};
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/zip';

@Component({
  moduleId: module.id,
  selector: 'parent'
})
export class Parent { 

  @ViewChild('child') child; //Just use <child #child></child> in your template

  constructor() {
  }
  ngOnInit() {
    Observable
    .zip(this.child.loadedState$, this.otherChild.loadedState$) //Add as many as you want here... 
    .subscribe(pair => {
      console.log('All child components loaded');
    });
  }
}

Answer 3

如果您还有内容子项（使用 <ng-content> 转入），那么 ngAfterContentInit() 是正确的生命周期回调。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontent

ngAfterContentInit() {
  doSomething();
}

Answer 4

让子组件在它们的 Init 上发出一个事件，并在你需要的地方监听它

Answer 5

OP 似乎认为它不适合他的需要，或者不优雅，但似乎 Vale Steve 的回答是这里最合乎逻辑的方法。

在我的情况下，我需要等待 2 个子组件初始化，它们控制着我的应用程序中的左右面板。我有两个子组件都将它们的初始化声明为共享服务：

  constructor(
      public _navigate: RouteNavigationService // service shared between all child components and parent
  ){}

  ngOnInit() {
    this._navigate.setChildInit(this.panel);
  }

共享服务（RouteNavigationService）：

  private _leftChildInit  = new Subject();
  private _rightChildInit = new Subject();

  leftChildInit$          = this._leftChildInit.asObservable();
  rightChildInit$         = this._rightChildInit.asObservable();

  setChildInit(panel){
    switch(panel){
      case 'leftPanel':
        console.log('left panel initialized!');
        this._leftChildInit.next(true);
        break;
      case 'rightPanel':
        console.log('right panel initialized!');
        this._rightChildInit.next(true);
        break;
    }
  }

然后在我的父组件中，我使用zip 方法将多个 Observable 组合在一起（您也可以在此处添加其他子组件）并等待它们全部完成：

  childInitSub: Subscription;

  constructor(
      public _navigate: RouteNavigationService
  ) {
    this.childInitSub = Observable.zip( // WAIT FOR BOTH LEFT & RIGHT PANELS' ngOnInit() TO FIRE
        this._navigate.leftChildInit$,
        this._navigate.rightChildInit$).subscribe(data =>
        // Both child components have initialized... let's go!
    );
  }

OP 在评论中声明

“我不喜欢这样，因为每次我添加一个新组件我都需要 等待一个额外的 onInit 事件并且必须实现它”

但实际上，您所要做的就是在您的服务中为新的子组件 ngOnInit 创建另一个 Subject，并在父组件的 zip 方法中添加一个额外的行。

请注意，这里接受的答案，使用ngAfterViewInit() 与上面的相当不同。在我的例子中，使用ngAfterViewInit() 会产生一个ExpressionChangedAfterItHasBeenCheckedError，这超出了这个问题的范围，但可以证明这种方法实际上并没有做同样的事情。

相比之下，上述方法实际上只是作为所有子组件的ngOnInit() 事件已触发的直接结果触发。

Answer 6

你可以试试这个。它对我有用

async ngOnInit() {
    // method to call
   await this.myMethod(); 
  }
}

Answer 7

在开发模式（默认）下，更改检测机制会对组件树进行额外检查，以确保您没有在挂钩中操纵 UI。这就是您遇到错误的原因。

如果您确定在 ngAfterViewInit 中对 UI 所做的更改是有效的，请在 bootstrap() 之前调用 enableProdMode()。这告诉 Angular，“在更改检测期间不要进行第二次传递”。