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

【问题标题】：Angular2 @Input from async pipe - availability in ngOnInit来自异步管道的 Angular2 @Input - ngOnInit 中的可用性
【发布时间】：2017-10-18 02:29:35
【问题描述】：

在一个博客上我读到：

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

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

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

在启动 ngOnInit 之前，组件会等待变量解析吗？

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

【问题讨论】：

为什么不试试看呢？在myObservableVariable 上添加.delay(10000) 和在ngOnInit 中添加console.log，看看什么时候会发生什么。

标签： angular

【解决方案1】：

简短的回答是否定的，组件实例化不会延迟，并且您将不会在onInit 中获得已解析的值如果在第一个更改检测周期之前尚未解析 observable。

比较以下：

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

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

【讨论】：

这是对异步管道内部工作原理的一个非常好的见解。这解释了很多，谢谢！
@charlie_pl，不客气，您可能会发现 this article 的变化检测也很有趣

【解决方案2】：

不，绑定是 available 并不意味着它们的值已经 resolved （而且它们以后可能会改变）。你可以用一个简单的例子来证明这一点：

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。

【讨论】：

【解决方案3】：

我知道该问题已得到解答，但也提供官方参考，因为它在文档中得到了很好的介绍： https://angular.io/guide/reactive-forms#when-to-set-form-model-values-ngonchanges

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

【讨论】：