如何在angular中对@输入应用异步/等待

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

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

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="getData()"></app-child>
  `
})
export class ParentComponent {
  getData(): Observable<any> {
    // 这里可以进行异步操作，例如从服务器获取数据
    return of('Hello, World!');
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <div *ngIf="data">{{ data }}</div>
    <div *ngIf="loading">Loading...</div>
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: Observable<any>;
  loading: boolean = true;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data && changes.data.currentValue) {
      this.loading = true;
      this.data.subscribe(
        (value) => {
          this.data = value;
          this.loading = false;
        },
        (error) => {
          console.error(error);
          this.loading = false;
        }
      );
    }
  }
}