如何在@Input Angular中传递异步？

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="data$ | async"></app-child>
  `,
})
export class ParentComponent {
  data$: Observable<any>;

  constructor() {
    this.data$ = this.getData();
  }

  getData(): Observable<any> {
    // 使用异步操作获取数据，例如从服务器请求数据
    return of({ name: 'John', age: 25 });
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <div>Name: {{ data.name }}</div>
    <div>Age: {{ data.age }}</div>
  `,
})
export class ChildComponent {
  @Input() data: any;
}