发表更新web / angular19 分钟读完 (大约2841个字)

Angular Async Pipe详解

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

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

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

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

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

1. 创建服务

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

1
2
3
4
5
6
7
8
9
10

export interface IProduct {

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

}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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。

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

1
2
3
4
5
6
7
8
9
10
11

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

让我们看一下代码：

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

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

2. 添加产品

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

1
2
3
4
5
6
7
8
9
10
11

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来接受用户输入，如下所示：

1
2
3
4
5
6
7
<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函数应如下所示：

1
2
3
4
5
addProduct() {
    if (this.productForm.valid) {
      this.appService.AddProduct(this.productForm.value);
    }
  }

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

3. 显示产品列表

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

  • 将组件的更改检测策略设置为 Default。
  • 在组件中注入AppService。
  • 使用 subscribe 方法从 observable 中获取数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@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模板上，您可以在表格中显示产品，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<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. 使用组件

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

1
2
3
4
5
6
7
8

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

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

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

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

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

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

5. 运行应用程序

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

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

6. 使用 onPush 变化检测策略

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

1
2
3
4
5
6
7
8
9

@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()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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组件以使用异步管道。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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模板上，使用异步管道。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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转换成空数组. 在页面向用户显示异常信息.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@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([]))
  );
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <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>

11. Angular 系列文章

最新更新以及更多Angular相关文章请访问 Angular合集 | 鹏叔的技术博客

12. 参考文档

Angular Basics: Step-by-Step Understanding the Async Pipe

How to Handle Errors Reactively when Using the Async Pipe

相关文章

Angular Async Pipe详解

https://pengtech.net/angular/angular_async_pipe.html

作者

鹏叔

发布于

2023-09-27

更新于

2024-08-06

许可协议

#
评论
关注我

follow.it

友情链接

分类

标签

AI2
Almalinux2
Android4
Angular68
Ansible6
Astro3
CMS1
Comments2
English2
Fedora3
GORM1
Gemini AI1
Giscus2
Golang9
Helm3
Hexo8
IDEA3
Java4
Linux3
Macos2
MariaDB1
Material1
Matrix2
NAS1
NPM1
Nodejs13
OS1
Redhat2
Rust4
SEO2
SSL1
Seo1
TLS1
Ubuntu3
Vultr4
Windows8
angularjs2
backend1
blog1
bootstrap2
browser2
chartjs1
chrome3
css5
database14
design16
docker2
dovecot1
element-web1
email1
fedora2
firefox1
git2
gitlab11
golang5
gradle2
html4
java9
javascript63
k8s6
less1
life2
linux57
macOS2
marketing2
material design17
maven3
network12
nginx7
pagination1
pgadmin1
pnpm1
postfix1
product6
sass1
sentry2
shell2
source_control2
spring2
spring boot2
springboot1
strapi5
swagger1
tailwindcss3
tauri9
tmux1
typescript1
v2ray5
v2rayA3
v2rayN1
v2rayNG1
virualbox1
vmware9
vscode7
web61
webpack2
websocket2
windows2
wordpress2

最新文章

归档

×