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具有層級關係。

Hierarchical Injector

• 多層級注入器的層級關係，階級高低由上至下：

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

@Injectable()

在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服務有效的簡化元件的程式碼內容、方便地模組化實用的工具。