Angular 中的异步管道

Question

我目前正在阅读 Angular 的入门部分，有一个部分我不明白。

从购物车服务中，他们从 app-folder 中的 shipping.json 获取数据。

HttpClient http;

getShippingPrices() {
return this.http.get('/assets/shipping.json');
}

然后在 shippingComponent 中，他们调用该方法：

 ngOnInit() {
this.shippingCosts = this.cartService.getShippingPrices();

在 html-template 中，必须使用异步管道。

   <div class="shipping-item" *ngFor="let shipping of shippingCosts | async">

我不明白，为什么我们必须使用异步管道？

或者可以在没有异步管道的情况下完成吗？

Answer 1

仅当您未订阅可观察对象时，您才使用异步管道。 这是最推荐的获取数据的方式，因为一旦数据消失，您就不必取消订阅，它会自动执行。 正如你在这段代码中看到的，你没有订阅cartService.getShippingPrices();

ngOnInit() {
  this.shippingCosts$ = this.cartService.getShippingPrices();
}
<div class="shipping-item" *ngFor="let shipping of shippingCosts$ | async">{{ shipping }}</div>

在此代码中，您将获得相同的结果，但没有异步管道，但请记住，在这种情况下，您必须订阅 cartService.getShippingPrices()。 此外，一旦您在这种特殊情况下处理完数据，您将不得不取消订阅 observable。

shippingCosts;
ngOnInit() {
  this.cartService.getShippingPrices().subscribe((data) => this.shippingCosts = data);
}
<div class="shipping-item" *ngFor="let shipping of shippingCosts">{{ shipping }}</div>

另一个重要的注意事项：请在持有 observable 的变量前添加美元符号。 在可观察变量的名称中使用美元符号被认为是最佳实践。 这样很容易识别你的变量是否是可观察的。

示例：shippingCosts$

Answer 2

来自Angular 文档的文字：

异步管道订阅 Observable 或 Promise 并返回它发出的最新值。 当发出新值时，异步管道会标记要检查更改的组件。 当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。

再次来自Angular 文档：

Angular 使用 observable 作为接口来处理各种常见的异步操作。 例如：

• 您可以定义自定义事件，将可观察的输出数据从子组件发送到父组件。
• HTTP 模块使用可观察对象来处理 AJAX 请求和响应。
• Router 和 Forms 模块使用 observable 来监听和响应用户输入事件。

那么为什么要避免使用async管道呢？ 只需在您的应用程序上使用它，即可享受响应式编程功能；)

Answer 3

因为http.get返回的是一个 Observable 对象，而不是数据。 如果不想使用异步管道，可以订阅或使用 await。

this.shippingCosts = await this.cartService.getShippingPrices().first().toPromise();

Answer 4

典型的 async 或 observable 操作需要订阅或 await 构造，如下所示：

// async await example
async function getPrices(){
  let prices = await this.cartService.getShippingPrices();
  return prices;
}

这段使用 async/await 结构的代码直到代码完成后才会返回。 “让价格 = 等待”是所谓的闭包的签名，它在功能上与以下内容相同：

ngOninit(({
  //subscription on observable example
  getPrices.subscribe(prices=>{ //data returned here });
}
function getPrices(){
  this.cartService.getShippingPrices();      
}

正如您在这两种情况下所看到的，结果都是价格。 使用异步管道，代码会在未来的某个时刻自动连接到结果。