提姆寫程式

0%

Angular 筆記 - 不同元件傳遞資料實作

發表於 分類於 Disqus：
使用 service 作為資料的橋梁

angular

這次專案有一個需求是完全不相干的元件，但要呈現相同的資料內容，使用 Angular8 開發，以此記錄流程。

資料

這次我用 db.json 作為假資料呈現，順便練習串接 API。相關操作可看這篇。

資料長這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "data": [
    {
      "name": "Tim",
      "age": "18",
      "gender": "male",
      "title": "Dad"
    },
    {
      "name": "Min",
      "age": "18",
      "gender": "Female",
      "title": "Mom"
    },
    {
      "name": "Joshua",
      "age": "2",
      "gender": "male",
      "title": "Son"
    },
    {
      "name": "Carol",
      "age": "0",
      "gender": "Female",
      "title": "Daughter"
    }
  ]
}

建立兩個元件

建立兩個不同的元件，沒有父子層關係。

components

實際需求

在點擊按鈕時呼叫 API 取得資料後傳到 second.component。

建立 service

在呼叫 API 前要先搭傳資料的橋樑，在 Angular 中可以使用 service 來搭建此方法。並分別在兩個元件中引入 service 取得 dataService 服務元件。

service

使用 get 跟 set

透過 getter 跟 setter 的特性，將值取得後 set 到 _dataPass 陣列中，要取得就使用 get。
dataService.servcie.ts

1
2
3
4
5
6
7
8
9
_dataPass = [];

get getData() {
  return this._dataPass;
}

set setData(val: any) {
  this._dataPass = val;
}

把資料給 dataService

設定完成後就可以來先在 first.component.ts 寫下取得資料個過程。

  1. 按下按鈕觸發事件，呼叫 API，並把資料賦值在 this.family 陣列。
  2. 使用 setter 的取得 this.family 的資料。
  3. 跳轉路由到 second 頁面。
1
2
3
4
5
6
7
click() {
   this._apiService.data().subscribe((res) => {
     this.family = res;
     this._dataSvc.setData = this.family;
     this._router.navigate(['/second']);
   });
 }

從 dataService 取得資料

  1. 引入 dataService 後，取得 first 元件傳過來的資料，並賦值在 this.getFirstData 陣列中。
1
2
3
getData() {
  this.getFirstData = this._datSvc.getData;
}

小結

善用 service 的注入配合 getter 與 setter，可以完成更多資料傳遞的實作，以上就完成兩個不相干元件的資料傳遞。

原始程式碼。