在 Angular 中使用异步管道

介绍

angular 中的异步管道将订阅 Observable 或 Promise 并返回其发出的最新值。每当从 Observable 或 Promise 发出新值时，异步管道都会标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。我们可以在 Angular 应用程序中使用异步管道，方法是包含 CommonModule，它会导出所有基本的 Angular 指令和管道，例如 NgIf、NgForOf、DecimalPipe 等。当您使用 CLI new 命令创建新应用程序时，这些会被 BrowserModule 重新导出，它会自动包含在根 AppModule 中。

AsyncPipe 的语法

以下语法显示了如何将异步管道与对象表达式一起使用。

{ {obj_expression|异步}}

将 AsyncPipe 与 Promises 结合使用

异步管道会自动添加 then 回调并呈现响应。现在让我们看一个将 Promise 绑定到视图的示例。单击“解决”按钮即可解决该承诺。

      @Component({
  selector: 'async -pipe',
  template: `<div>
    <code>promise|async</code>:
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ logMessage | async }}</span>
  </div>`
})
export class AsyncPipeComponent {
  logMessage: Promise<string>|null = null;
  arrived: boolean = false;
 
  private resolve: Function|null = null;
 
  constructor() { this.reset(); }
 
  reset() {
	this.arrived = false;
    this.logMessage = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }
 
  clicked() {
    if (this.arrived) {
      this.reset();
	} else {
      this.resolve !('hi there!');
      this.arrived = true;
    }
  }
}
    

在上面的例子中，我们将承诺的输出通过管道传输到异步管道。属性 promise 是从 logMessage 返回的实际未解决的承诺，而无需对其进行调用。

将 AsyncPipe 与 Observable 结合使用

用于 Observable 的 AsyncPipes 会自动订阅可观察对象、呈现输出，然后在组件被销毁时取消订阅。因此，我们不需要自己处理清理逻辑。无需在组件中手动取消订阅。Angular 使用 ngOnDestroy 自动为我们处理异步管道的订阅。AsyncPipe 开箱即用地使用 OnPush 变更检测。我们需要确保所有业务逻辑都是不可变的，并且始终返回新对象。我们可以说 OnPush 变更检测策略对性能非常有益，因此我们应该尽可能多地使用异步管道。此外，我们可以说，这些功能的一致使用简化了应用程序，因为开发人员始终可以假设单向数据流和自动订阅管理。我们还可以将异步管道与 Observable 一起使用。现在让我们看下面的示例，该示例将时间 Observable 绑定到视图。Observable 会使用当前时间不断更新视图。

      @Component({
  selector: 'async -pipe-observable',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncPipeObservableComponent {
  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}
    

在上面的例子中，当我们将可观察对象直接传输到异步管道时，异步管道会为我们执行订阅，然后返回传递给它的任何内容。使用异步管道的优点是：

我们不需要在可观察对象上调用订阅并将中间数据存储在我们的组件上。
当组件被销毁时，我们不需要记住取消对可观察对象的订阅。

与订阅相比，使用 AsyncPipe 的优势

AsyncPipe 开箱即用地使用 OnPush 变更检测。我们需要确保所有业务逻辑都是不可变的，并且始终返回新对象。
使用 subscribe() 引入了在组件生命周期结束时取消订阅的补充需求，以避免内存泄漏。开发人员必须手动取消订阅。执行此操作的最常见 RxJS（声明式）方法是使用 takeUntil(unsubscribe$)。
无需在组件中手动取消订阅。Angular 使用 ngOnDestroy 自动为我们处理异步管道的订阅。
使用订阅解开属性，可以在模板的多个地方“按原样”使用，而无需依赖各种解决方法。
Unwrapped 属性在组件的任何地方都可用。这意味着它可以直接在组件的方法中使用它，而无需从模板传递它。这样，所有状态都可以保留在组件中。
OnPush 变更检测策略对性能有很大帮助，因此我们应尽可能使用异步管道。更重要的是，我们可以说，持续使用这些功能可以简化应用程序，因为开发人员始终可以假设单向数据流和自动订阅管理。

让我们考虑下面的一个例子，我们在 EmployeesComponent 类中使用异步管道而不使用订阅。并且不需要使用 unwrapped 属性来在组件和模板中使用。

      @Component({
  template: `
    <ul *ngIf="(employees$ | async).length">
      <li *ngFor="let employee of employees$ | async">{{employee.name}}</li>
    </ul>  
  `
})
export class EmployeesComponent implements OnInit { 
  employees$: Observable<Employee[]>;
 
  constructor(private dept: Department<State>) {}
 
  ngOnInit() {
    this. employees$ = this.dept.pipe(select(selectEmployees))
  }
}
    

结论

在本指南中，我们探索了 Angular 中的 AsyncPipe。我们还了解了如何在应用程序中使用 Promises 或 Observables 使用 AsyncPipe。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文