Question

有人可以解释一下，为什么在下面的示例中，如果我在OtherComponent的@Input中访问ngOnInit为空（http调用成功）？

SomeComponent：

@Component({   
selector: 'some-component',   
template: `<other-component [data]="observable$ | async"></other-component>`,   
styles: [``] }) 
export class SomeComponent  {

    observable$: Observable<any>;

    ngOnInit(): void {
      observable$ = this.http.get(...); // service call via angular httpClient 
    }

OtherComponent：

@Component({   
selector: 'other-component',   
template: `<div>...</div>`,   
styles: [``] }) 

export class OtherComponent  {

    @Input()
    data: any;

    ngOnInit(): void {
     // if I access this.data here, it is null
    }

根据angular documentation，异步管道订阅了一个可观察对象，并返回它发出的最新值。所以我想，异步管道将传递http调用的结果，而不是null。

如果我使用* ngIf，则将http调用的结果传递下来，而不是null。

<other-component *ngIf="observable$ | async as observable" [data]='observable'>

Stackblitz示例：

https://stackblitz.com/edit/angular-xghrjg

Answer 1

模板：

<other-component [data]='observable$ | async'>

OtherComponent：

@Component({   
selector: 'other-component',   
template: `<div>...</div>`,   
styles: [``] }) 

export class OtherComponent  {

    @Input()
    data: any;

    ngOnInit(): void {}

    ngOnChanges(){
      console.log(this.data);
    }

Answer 2

问题在于，子组件（在您的情况下为OtherComponent）初始化时，数据还不存在，因为数据是异步加载的。

由于该Angular具有OnChanges生命周期挂钩，因此当您更改数据（作为Input（））时，它使您能够管理数据。

文档-> https://angular.io/guide/lifecycle-hooks#onchanges

更新后的Stackblitz-> https://stackblitz.com/edit/angular-nkgcj9?file=src%2Fapp%2Fdummy.component.ts

重要的是

ngOnChanges(changes) {
  this.transformedData = changes.data.currentValue; 
}

角度异步管道和http / delayed可观察到

2 个答案: