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

在Angular中，父组件可以使用@Input()装饰器来向子组件传递数据。如果这些数据是异步获取的，父组件可以在获取数据后，使用ChangeDetectorRef来通知Angular更新数据绑定。

以下是一个简单的例子：

父组件（parent.component.ts）:

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  template: `<app-child [data]="parentData"></app-child>`
})
export class ParentComponent implements OnInit {
  parentData: any;
 
  constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
  ngOnInit() {
    this.fetchAsyncData();
  }
 
  fetchAsyncData() {
    // 模拟异步获取数据的过程
    setTimeout(() => {
      this.parentData = '异步获取的数据';
      // 数据更新后，手动触发变更检测
      this.changeDetectorRef.detectChanges();
    }, 1000);
  }
}

子组件（child.component.ts）:

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`
})
export class ChildComponent {
  @Input() data: any;
}

在这个例子中，父组件在ngOnInit生命周期钩子中异步获取数据，并在数据准备好后，通过ChangeDetectorRef的detectChanges方法来通知Angular进行变更检测，以便Angular可以更新视图上的数据绑定。这样子组件就可以接收到父组件异步传递的数据。