Angular 前端

Angular 學習筆記(7) — Service

JamesW 2024/07/15 08:57:06
644

Service 是Angualr 裡好用的工具,可以做出串接API、或是將共用的邏輯拆分出來在不同的的元件做使用,是相當方便的使用方式。

目標:學習、了解使用Angular Service。

  • 透過service 依賴注入dependency injection的特性,提升模組性重複性:

 

 

  • 過去父子層元件透過@Output、Custom event來傳遞或變更資料,現在能夠更直覺並方便重複利用功能和資料的方式。

建立Service

  1. 建立[服務名稱].service.ts 檔:

2. 建立service內容,並引入至component中:

3. 在providers 中注入使用的service,並在constructor中建構service的參數

4. 透過這樣的方式,可以儲存資料和多個methods。

Service 使用

  1. 引入service中的資料:

 

2. 省去使用@Output並能重複使用,來做元件溝通:

3. 也可以在service中抓取所需emit值:

4. 同一個元件能注入兩個以上的service做使用

引入Service

  • provides需要注意,因Angular 為多層級注入器(Hierarchical Injector),注入的service具有層級關係。
  • 多層級注入器的層級關係,階級高低由上至下:

 

  • AppModule的層級最高,注入至全域都能使用,在App.module.ts 中providers插入子元件即可使用service。
  • 利用@Injectable互相注入,將service注入module 的 providers裡讓資料,讓所有元件都能夠使用。

 

在AppComponent 中,providers注入在component的service,只會提供給其家族的子層元件,與其他旁支元件互不影響。 同時使用多個service時,若父層元件已注入相同provider,重複注入會overwrite提供內容。

  • @Injectable({providedIn:’root’}) 插入後,並引入其他service,讓service 之間互相注入使用:

 

  • 使用綁定其他service裡面method的service:

 

進階使用Service

  • Service作為存取資料時,使用private的方式保護資料:

 

  • 因為資料為private,需有一個emit的值做來做監控

 

  • 在執行Service裡的methods之後,雖然能成功直執行,但畫面仍需執行emit才能變動資料:

 

  • Component需用observable subscribe 做每一次method 變化的資料監控,來更新變化的內容:

 

結語

Service 為了不讓參數、邏輯只存在單一元件並且能夠重複使用所以建立的服務工具,最常用在API的串接功能,以及取得全域變數的情境,善用Serivce服務有效的簡化元件的程式碼內容、方便地模組化實用的工具。

JamesW