今天要講的內容根本是 Angular 101，但是為了之後的文章，今天的內容是不可或缺的！吧。

總之今天要介紹的是 Angular 內建的 pipe 之一：AsyncPipe。

直接看個範例

AsyncPipe 最方便的就是他會幫你處理 Observable 的 subscribe，所以如果是單純的資料流，你可以不用在 TypeScript 的程式碼裡面又再處理 subscribe 與 unsubscribe 的邏輯，只需要在 HTML template 檔案加上 AsyncPipe，Angular 就會幫你 subscribe，然後再幫你 unsubscribe，是一個非常方便又好用的 pipe！

若想對 Observable 有更深入的了解，可以到我的隊友 Mike 的打通 RxJS 任督二脈，獲得更多關於 RxJS 的知識！

<p>It Works!</p>
<ng-container *ngIf="show">
  <p>This is subscribed by AsyncPipe: {{ interval1 | async }}</p>
  <p>This is subscribed manually: {{ interval2Value }}</p>
</ng-container>
<button mat-raised-button (click)="changeShow()">Change</button>

↑ Block 1

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  title = 'day25';
  show = true;
  interval1 = interval(1000);

  interval2Value = 0;
  interval2 = interval(1000);
  constructor(private renderer: Renderer2) {}
  ngOnInit(): void {
    this.interval2.subscribe((x) => {
      this.interval2Value = x;
    });
  }

  changeShow(): void {
    this.show = !this.show;
  }
}

↑ Block 2

Block 1 以及 Block 2 的範例很單純，我用 interval 函式建立了兩個每秒更新一次的 Observable 物件，分別是 interval1 與 interval2。

其中 interval1 用 AsyncPipe 的方式，讓 Angular 協助我們 subscribe；另一個 interval2 則是在 TypeScript 內用人工的方式自行訂閱，同時並沒有做任何取消訂閱的動作。

然後就會取得像下圖這樣子的結果：

↑ Image 1

當按下 Change 按鈕時，裝載這兩個 p 元素的 ng-container 會因為 NgIf 的關係而從 DOM 消失，同時 AsyncPipe 會取消對 interval1 的 subscribe，等到下次出現時又是從 0 開始計算。而 interval2 的部分因為它是手動被 subscribe 的，所以就算 template 用來顯示的 p 元素被移除，也不影響 interval2 的訂閱效果。

當應用程式越來越龐大的時候你很容易就不小心這邊有一個 subscribe 但是卻忘了適時的將之 unsbscribe，導致應用程式顯示的畫面不如預期，但若是我們採用 AsyncPipe 來協助我們處理這一層關係的話，就可以避免類似的事情發生囉！

以上就是今天要分享給各位的 Angular 101，明天會來仔細看一下 Pipe 的機制是怎麼運作的，以及 Async 是在什麼時候 subscribe 以及 unsubscribe 我們的 Observable！

最後一週啦 ?

以下按照入團順序列出我們團隊夥伴的系列文章！

請自由參閱 ?

• 打通 RxJS 任督二脈
• 深入 Azure 雲端服務
• 如何用Laravel寫一個簡單的部落格網站
• 推動資安從0起步邁向70分，不用花大錢也能有聲有色保平安。
• Azure Serverless 平步青雲，漫步雲端