Angular 中如何传递异步数据？

Question

在父子组件通信时，如果输入属性绑定的数据是异步的，那我们可以使用 *ngIf、ngOnChanges、Observable 等方案解决上述问题。

在 Angular 中传递异步数据通常涉及到使用 Observables 或 Promises 来处理数据流和异步操作。以下是几种常见的方式来传递异步数据：

1. 使用 Observable

Angular 的核心库 RxJS 提供了 Observable ，这是处理异步数据流的强大工具。

示例：在服务中使用 Observable

首先，创建一个服务并定义一个方法来获取数据：

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

然后，在组件中订阅这个 Observable 并处理数据：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      data => this.data = data,
      error => console.error(error)
    );
  }
}

2. 使用 Promise

虽然 Observable 是推荐的选择， Promise 也可以用于处理异步数据。

示例：在服务中使用 Promise

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Promise<any> {
    return this.http.get<any>(this.apiUrl).toPromise();
  }
}

然后，在组件中使用 async/await 来处理 Promise ：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) { }

  async ngOnInit() {
    try {
      this.data = await this.dataService.getData();
    } catch (error) {
      console.error(error);
    }
  }
}

3. 在父子组件之间传递数据

有时你可能需要在父组件和子组件之间传递异步数据。这里可以使用 Angular 的 @Input 和 @Output 装饰器，结合 Observable 或 Promise 来实现。

父组件

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) { }

  async ngOnInit() {
    this.data = await this.dataService.getData();
  }
}

子组件

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() data: any;
}

父组件模板

<!-- parent.component.html -->
<app-child [data]="data"></app-child>

总结

• Observable 是处理异步数据流的推荐方法，它允许你在数据流发生变化时作出响应。
• Promise 适用于处理单一的异步操作，适合于某些简化的场景。
• 父子组件之间的数据传递 可以通过 @Input 和 @Output 结合异步数据来实现。

根据你的需求和数据流的复杂性选择合适的方式。