[從 0 開始的 Angular 生活]No.37 使用 async 管道元件訂閱 Observable 物件

發表於 | 更新於 | 分類於

前言

不知不覺也到了 No.37 了，最後還想要再介紹一個名為 Async 的管道元件，說到管道元件一定不陌生，因為先前就介紹蠻多常用的管道元件了。

Async 管道元件

管道元件可以讓我們用在 Template 上的屬性繫結或者內嵌繫結的地方。

使用方法也相當簡單，加上 | 符號後再加上要使用的 Pipe 元件即可。

Async 管道元件 也可以在官網找到相關文件

Async 管道元件就是用來訂閱任何一個 Observable 物件 (觀察者物件)

  • 所以這個 Async 管道元件通常是用於 HttpClient 的回傳值或者是 Observable 的情況
  • 可以省略在類別中的方法內使用 .subscribe() 的動作
    • 意思就是透過 Async 管道元件幫我們做 .subscribe() 的動作

因此，讓我們再度進行重構吧！

ArticleList 的重構

  • 將屬性 atticleData 重新命名為 atticleData$
    • $ 字號是命名觀察者物件的一個命名習慣
      • 必要時也使用 TypeScript 將 Observable 的型別也加上
        • 而 Observable 是泛型語法，因此也需要加上角括號 <any>
  • 而修改了屬性 atticleData ，所以有用到屬性 atticleData 的方法全部都報錯
    • 這部分可以先暫時刪除，因為這篇只是為了要介紹 Async 管道元件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.scss']
})
export class ArticleListComponent implements OnInit {
  counter = 0;
  atticleData$: Observable<any>;
  constructor(public datasvc: DataService) {
  }
  ngOnInit() {
    this.atticleData$ = this.datasvc.getData();
  }
}

而 Template 部分一樣要修改，豪邁的砍掉錯誤的部分

1
2
3
4
5
6
<!-- Article START-->
<article class="post" id="post{{idx}}" *ngFor="let item of atticleData$ | async; let idx = index">
  <app-article-header [item]="item"></app-article-header>
  <app-article-body [item]="item" [counter]="counter"></app-article-body>
</article>
<!-- Article END-->

最後來看一下結果吧：

透過這個簡單的範例介紹 Async 管道元件的用途。

而通常 Async 管道元件會被用於只需要單純取得資料且來源又是 Observable 時可以簡化不少程式碼。

小結

總算是跑完這一系列了，也逐漸覺得 Angular 有不少好用的地方是 Vue 所體會不到的，但有部分的觀念其實很類似，所以學習起來不會感到特別吃力。

但是儘管我完成了這一系列，不可置否的是我仍然對於 Angular 語法以及 TypeScript 的語法不夠熟悉，這樣是沒辦法熟練應用於實務上的，因此還必須持續的努力、複習。

這一系列完成於到新公司上班的前一天，而我也是因為這間公司才開始投入學習 Angular 的，希望透過這樣職前的自我訓練，能在進入公司後盡快地掌握公司內 Angular 的專案。

一系列的文章通常只有最初跟最後有人看，所以我還是在這裡把環境稍微交代一下：

  • 專案使用的 Angular CLI 版本是 7.3.9
  • 使用 Angular 7 的語法撰寫
  • GitHub Repo
0%