Question

在一个博客上，我已经读过：

ngOnInit生命周期钩子是绑定的保证随时可用。

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

<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，在每个更改检测周期都会调用它。此方法负责返回将传递给子组件的observable的当前已解析值。如果在第一个更改检测周期之前尚未解析可观察量，则您的子组件将在null中获得onInit。

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

Answer 2

不，可用的绑定并不意味着它们的值已经已解决（并且它们可能会在以后更改）。您可以通过一个简单的示例来证明这一点：

import { Component, Input, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'sub-component',
  template: `<p>{{ myInput }}</p>`,
})
export class SubComponent implements OnInit {
  @Input() myInput: string;

  ngOnInit() {
    console.log('initialised with', this.myInput);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <sub-component [myInput]="content$ | async"></sub-component>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  content$ = Observable.of('Hello world').delay(5000);
}

https://plnkr.co/edit/jX7hOafuJtsWYhYrJx07?p=preview

在控制台中，您将看到initialised with null，然后五秒钟后文本将出现在子组件中。

如果您想知道@Input数据何时发生变化，则需要实施OnChanges。

Answer 3

我知道这个问题已得到解答，但也提供了正式的参考资料，因为它在文档中很好地涵盖了：

changedetection＆amp;生命周期钩子从Observable值解析独立发生（因此是异步），因此您无法保证在onInit时您拥有数据。这正是onChanges的用途。

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

3 个答案: