Angular Async Pipe详解

发表于 2023-09-27 更新于 2024-04-28 分类于 frontend 阅读次数：本文字数： 10k 阅读时长 ≈ 9 分钟

Async Pipe可以对 Angular 应用程序的更改检测策略产生巨大影响。如果到目前为止您还感到困惑，请详解读完全文。我们一起来了解一下吧！

在 Angular 中，Async Pipe本质上是执行以下三个任务的管道:

它订阅一个observable或一个Promise并返回最后发出的值。
每当发出新值时，它都会标记组件为需要要检查的。这意味着Angular将在下一个周期中为该组件运行Change Detector。
当组件被销毁时，它会取消订阅可观察的内容。

此外，作为最佳实践，建议尝试使用 onPush 更改检测策略上的组件和异步管道来订阅可观察对象。

如果您是Angular的初学者，也许上面对异步管道的解释让人不知所措。因此，在本文中，我们将尝试使用代码示例逐步理解异步管道。只需创建一个新的Angular 项目并继续操作即可；在文章的最后，您应该对异步管道有一些深刻的了解。

1. 创建服务

让我们从创建产品接口和服务开始。


export interface IProduct {

     Id : string; 
     Title : string; 
     Price : number; 
     inStock : boolean;

}

创建IProduct接口后，接下来在 Angular 服务内部创建一个IProduct数组来执行读写操作。

import { Injectable } from '@angular/core';
import { IProduct } from './product.entity';

@Injectable({
  providedIn: 'root'
})
export class AppService {

  Products : IProduct[] = [
    {
      Id:"1",
      Title:"Pen",
      Price: 100,
      inStock: true 
    },
    {
      Id:"2",
      Title:"Pencil",
      Price: 200,
      inStock: false 
    },
    {
      Id:"3",
      Title:"Book",
      Price: 500,
      inStock: true 
    }
  ]

  constructor() { }
}

请记住，在实际应用程序中，我们从远程API获取数据；然而，在这里我们模仿本地数组中的读取和写入操作，以重点关注异步管道。

为了执行读写操作，我们将 Products 数组包装在 a 中BehaviorSubject，并在每次将新项目推送到数组时发出一个新数组Products。

为此，请在服务中添加代码，如下所示：


Products$ : BehaviorSubject<IProduct[]>; 
  constructor() {
    this.Products$ = new BehaviorSubject<IProduct[]>(this.Products);
   }
  
   AddProduct(p: IProduct): void{
    this.Products.push(p);
    this.Products$.next(this.Products);
   }

让我们看一下代码：

BehaviourSubject是一种发出默认值或最后发出值的Subject。我们使用的BehaviorSubject最初发送的默认值是Products数组。
在该AddProduct方法中，我们接收一个Product并将其推送到数组中。
在该AddProduct方法中，将接收到的Product推送到Products数组后，我们将发出更新后的Products数组。

目前，该服务已准备就绪。接下来，我们将创建两个组件: 一个用于添加产品，另一个用于在表格上显示所有产品。

2. 添加产品

创建一个名为AddProduct的组件，并添加一个响应式式表单来接受产品信息。


productForm: FormGroup;
  constructor(private fb: FormBuilder, private appService: AppService) {
    this.productForm = this.fb.group({
      Id: ["", Validators.required],
      Title: ["", Validators.required],
      Price: [],
      inStock: []
    })
  }

我们使用FormBuilder来创建FormGroup组件，并在template中使用HTML表单结合productForm来接受用户输入，如下所示：

<form (ngSubmit)='addProduct()' [formGroup]='productForm'>
    <input formControlName='Id' type="text" class="form-control" placeholder="Enter ID" />
    <input formControlName='Title' type="text" class="form-control" placeholder="Enter Title" />
    <input formControlName='Price' type="text" class="form-control" placeholder="Enter Price" />
    <input formControlName='inStock' type="text" class="form-control" placeholder="Enter Stock " />
    <button [disabled]='productForm.invalid' class="btn btn-default">Add Product</button>
</form>

在函数AddProduct中，我们将检查表单是否有效。如果有效，我们调用该服务将一种产品推送到Products数组。该AddProduct函数应如下所示：

addProduct() {
    if (this.productForm.valid) {
      this.appService.AddProduct(this.productForm.value);
    }
  }

到目前为止，我们已经创建了一个包含reactive form的组件，用于输入产品信息并调用服务在 Products 数组中插入新产品。如果您使用过 Angular，上面的代码应该很简单。

3. 显示产品列表

为了显示产品列表, 我需要这样做:

将组件的更改检测策略设置为 Default。
在组件中注入AppService。
使用 subscribe 方法从 observable 中获取数据。


@Component({
  selector: 'app-list-products',
  templateUrl: './list-products.component.html',
  styleUrls: ['./list-products.component.css'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ListProductsComponent implements OnInit, OnDestroy {

  products: IProduct[] = []
  productSubscription?: Subscription
  constructor(private appService: AppService) { }

  productObserver = {
    next: (data: IProduct[]) => { this.products = data; },
    error: (error: any) => { console.log(error) },
    complete: () => { console.log('product stream completed ') }
  }

  ngOnInit(): void {
    this.productSubscription = this.appService.Products$.subscribe(this.productObserver)
  }

  ngOnDestroy(): void {
    if (this.productSubscription) {
      this.productSubscription.unsubscribe();
    }
  }
}

让我们看一下代码：

products变量保存从服务返回的数组。
是productSubscription 是RxJS Subscription类型的变量，用于保存从可观察对象的订阅方法返回的订阅。
这productObserver是一个具有 next、error 和complete 回调函数的对象。
观察者productObserver被传递给 subscribe 方法。
在ngOnDestrory()生命周期钩子中，我们取消订阅可观察的内容。

在html模板上，您可以在表格中显示产品，如下所示：


<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Price</th>
            <th>inStock</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products">
            <td>{{p.Id}}</td>
            <td>{{p.Title}}</td>
            <td>{{p.Price}}</td>
            <td>{{p.inStock}}</td>
        </tr>
    </tbody>
</table>

4. 使用组件

我们将使用这两个组件作为同级组件，如下所示。


<h1>{{title}}</h1>

<app-add-product></app-add-product>

<hr/>
<app-list-products></app-list-products>

这里您应该注意的一个关键点是组件AddProduct和ListProducts组件是不相关的。它们之间只有两种方式传递数据：

通过父组件进行通信
通过使用服务进行通信

我们已经创建了一项服务，并将使用该服务在这两个组件之间传递产品信息。

5. 运行应用程序

您可以通过单击“添加产品”按钮来添加产品。这会调用服务中的一个函数，该函数会更新数组并从可观察对象中发出更新后的数组。

列出产品的组件会订阅可观察的内容，因此每当我们添加另一个项目时，表就会更新。到目前为止，一切都很好。

6. 使用 onPush 变化检测策略

如果您还记得ListProducts组件更改检测策略设置为默认值。现在让我们继续将策略更改为onPush：


@Component({
  selector: 'app-list-products',
  templateUrl: './list-products.component.html',
  styleUrls: ['./list-products.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListProductsComponent implements OnInit, OnDestroy {

再次，继续运行该应用程序。你发现了什么？正如您注意到的那样，当您用AddProduct组件添加产品时，它会被添加到数组中，甚至更新的数组也会从服务中发出。尽管如此，该 ListProducts组件仍未更新。发生这种情况是因为ListProducts组件的更改检测策略设置为onPush。

将更改检测策略更改为 onPush 可防止表被新产品刷新。

对于具有onPush更改检测策略的组件，Angular仅在新引用传递给组件时才运行更改检测器。但是，当observable发出新元素时，它仍然是原来的引用。因此，Angular没有运行变更检测器，并且更新的 Products 数组也没有显示在组件中。

您可以在此处了解有关Angular变化检测器的更多信息。

7. 我们该如何解决这个问题？

我们可以通过手动调用更改检测器来解决此问题。为此，请注入ChangeDetectorRef组件并调用该markForCheck()方法。

export class ListProductsComponent implements OnInit, OnDestroy {

  products: IProduct[] = []
  productSubscription?: Subscription
  constructor(private appService: AppService, 
    private cd: ChangeDetectorRef) {

   }

  productObserver = {
    next: (data: IProduct[]) => {
       this.products = data; 
      this.cd.markForCheck(); 
    },
    error: (error: any) => { console.log(error) },
    complete: () => { console.log('product stream completed ') }
  }
  ngOnInit(): void {
    this.productSubscription = this.appService.Products$.subscribe(this.productObserver)
  }

  ngOnDestroy(): void {
    if (this.productSubscription) {
      this.productSubscription.unsubscribe();
    }
  }
}

至此，我们完成了以下任务：

我们将 Angular ChangeDetectorRef 注入到组件中。

该markForCheck()方法将该组件及其所有父组件标记为dirty组件，以便 Angular 在下一个更改检测周期中检查更改。

现在运行应用程序，您应该能够看到更新的产品数组。

8. Subscribe方式分析

正如您所看到的，在设置为的组件中onPush，要使用可观察量，请按照以下步骤操作。

订阅可观察的内容。
手动运行更改检测。
取消订阅可观察的内容。

该方法的优点subscribe()是：

属性可以在模板中的多个位置使用。
属性可以用在组件类的不同位置。
您可以在订阅可观察对象时运行自定义业务逻辑。

一些缺点是：

对于onPush变更检测策略，您必须手动标记组件以使用该markForCheck方法运行变更检测器。
您必须明确取消订阅可观察量。
当组件中使用许多可观察量时，这种方法可能会失控。如果我们错过取消订阅任何可观察的内容，则可能存在潜在的内存泄漏等。

使用Async Pipe可以解决上述问题。

9. Async管道

异步管道是在组件中处理可观察对象的更好且更推荐的方式。在底层，异步管道执行以下三项任务：

它订阅可观察对象发出的最后值。
当发出新值时，它标记要检查更改的组件。
当组件被销毁时，异步管道会自动取消订阅，以避免潜在的内存泄漏。

所以基本上，异步管道会完成您为订阅方法手动执行的所有三项任务。

让我们修改ListProducts组件以使用异步管道。

@Component({
  selector: 'app-list-products',
  templateUrl: './list-products.component.html',
  styleUrls: ['./list-products.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListProductsComponent implements OnInit {

  products?: Observable<IProduct[]>;
  constructor(private appService: AppService) {}
  ngOnInit(): void {
    this.products = this.appService.Products$;
  }
}

我们删除了ListProductsComponent之前的所有代码，并将服务返回的可观察赋给产品变量。在现在HTML模板上，使用异步管道。

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Price</th>
            <th>inStock</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products | async">
            <td>{{p.Id}}</td>
            <td>{{p.Title}}</td>
            <td>{{p.Price}}</td>
            <td>{{p.inStock}}</td>
        </tr>
    </tbody>
</table>

使用异步管道可以使代码更清晰，并且您不需要为onPush更改检测策略手动运行更改检测器。在应用程序上，您会看到ListProducts每当添加新产品时组件都会重新。

始终建议的最佳做法是：

将组件变化检测策略设置为onPush
使用异步管道来处理可观察量

我希望您觉得这篇文章很有用，并且现在已经准备好在您的 Angular 项目中使用异步管道。

10. 如何处理异常

如果程序在抓取数据时出现异常, 此时我们可以在 tap算子中捕捉异常, 在catchError算子中将error转换成空数组. 在页面向用户显示异常信息.


@Component({
  selector: 'app-list-products',
  templateUrl: './list-products.component.html',
  styleUrls: ['./list-products.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListProductsComponent implements OnInit {

  products?: Observable<IProduct[]>;
  error: Error | null = null;
  constructor(private appService: AppService) {}
  ngOnInit(): void {
    this.products = this.appService.Products$.pipe(
    tap({
      error: (error) => this.error = error
    })
    catchError((err) => of([]))
  );
  }
}

在页面检测是否有错误发生, 将错误信息显示给用户.

 <div *ngIf="error" class="error">{{error}}</div>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Price</th>
            <th>inStock</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products | async">
            <td>{{p.Id}}</td>
            <td>{{p.Title}}</td>
            <td>{{p.Price}}</td>
            <td>{{p.inStock}}</td>
        </tr>
    </tbody>
</table>