来自异步管道的 Angular2 @Input - ngOnInit 中的可用性

Question

在一个博客上我读到:

The ngOnInit lifecycle hook is a guarantee that your bindings are readily available.

使用异步管道传递的参数也是如此吗？例如:

<myComponent [myInput]="myObservableVariable | async">
 ...
</myComponent>

组件是否会在启动 ngOnInit 之前等待变量被解析？

这意味着有时，当数据需要一段时间才能解析时，组件加载可能需要很长时间。

Answer 1

简短的回答是否定的，组件实例化不会被延迟，并且您不会在 onInit 中获得已解析的值 如果在第一次更改检测之前未解析可观察对象循环。

比较以下内容:

  // the value will be available in onInit
  obs = Observable.from([33]);

  // the value will not be available in onInit (you'll get null)
  obs = new Observable(observer => {
    setTimeout(() => {
      observer.next(33);
    }, 1000);

    setTimeout(() => {
      observer.complete();
    }, 3000);
  });


<child-component [inputproperty]="obs"><child-component>

下面是使用 async 管道时发生的事情:

async 管道有一个方法 transform，它在每个变化检测周期被调用。此方法负责返回将传递给子组件的可观察对象的当前解析值。如果在第一个更改检测周期之前未解决可观察对象，则您的子组件将在 onInit 中获得 null。

然后，在下一个摘要周期中，您的绑定(bind)将被更新，因为 transform 将返回已解析的值。有趣的是，可观察对象的分辨率可以触发变化检测周期。您可以在 onChanges 生命周期钩子(Hook)中获取绑定(bind)的新值。