Angular中父组件异步向子组件传值

Angular中父组件异步向子组件传值

在Angular中，我们可以用下面这种方式实现父组件向子组件传值

父组件.html

<app-child [value]="data"></app-child>

子组件.ts

@Input() value

但是，如果data需要异步获取的话，子组件中的value会得到null。我们可以用BehaviorSubject和async来实现异步传送数据：

父组件.ts

//定义一个发送数据的对象public myObservable= new BehaviorSubject(null);

//data加载完成后发送数据this.service.function().subscribe((data)=>{myObservable.next(data);})

父组件.html

//定义一个发送数据的对象<app-child *ngIf="myObservable | async as finalData" [value]="finalData"></app-child>