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

正如您在這兩種情況下所看到的，結果都是價格。 使用異步管道，代碼會在未來的某個時刻自動連接到結果。