1.使用服務的目的：

服務是為不同元件之間共享資訊提供的方法， 如元件不應該直接獲取或者儲存資料，不應瞭解是否展示假資料， 而（元件）更應該聚焦資料展示，把資料訪問的職責委託給某個服務；

使用服務的總結：

   1.1提取多個元件之間重複的程式碼；

   1.2抽象多個元件之間相同邏輯的程式碼；

   1.3提供元件之前的相互通訊；

   1.4封裝工具庫，供元件使用；

2.服務的使用流程：

   2.1建立服務，Angular CLI命令：ng g service services/[customServiceName] 建立指定目錄下的（自定義）服務；

   2.2在 app.module.ts 裡面引入建立的服務：

import {customServiceName} form './services/customServiceName.service';

  2.3在 app.module.ts 裡面的 @NgModule 裡面的 providers 裡面依賴注入服務；

providers: [customServiceName], //配置服務

 2.4在需要使用服務的元件中引入服務，【官方推薦】依賴注入服務；

//引入服務
import { customServiceName } from '../../services/customServiceName.service';

//class中的建構函式，依賴注入服務
constructor(private coustomName: customServiceName){

}
 

2.5使用服務;

//自定義方法（函式）
getData(){
   this.coustomName.coustomFunction(); //this.自定義服務名稱.自定義服務中的方法();
   //ToDo 自定義邏輯處理；
}

3.完整例項，自定義服務 =》依賴注入 =》元件引用、註冊 =》 元件使用；

3.1建立Storage服務：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { } /* 自定義建構函式 */

  setItem(key, value) { /* 設定key-value格式的資料儲存在localStorage物件中 */
    localStorage.setItem(key, JSON.stringify(value));
  }

  getItem(key) { /* 獲取localStorage物件中儲存的值 */
    return JSON.parse(localStorage.getItem(key));
  }

  removeItem(key) { /* 移除localStorage物件中指定key的value值 */
    localStorage.removeItem(key);
  }
}
 

3.2app.module.ts 中引入Storage服務並配置該服務；

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; /* 資料繫結模組，表單模組 */
import { StorageService } from './services/storage.service'; /* 引入Storage服務 */
import { AppComponent } from './app.component';
import { NewsComponent } from './news/news.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule /* 宣告表單模組 */
  ],
  providers: [StorageService], /* 配置Storage服務 */
  bootstrap: [AppComponent] /* 預設啟用類 */
})
export class AppModule { }

3.3元件中引入、註冊和使用服務：

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../services/storage.service'; /* 引入Storage服務 */

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  
  constructor(private storage: StorageService) { /* 依賴注入Storage服務,官方推薦 */
    console.log(this.storage); /* 檢測輸出服務 */
    this.storage.getItem('username'); /* 使用Storage服務中的getItem(key)方法 */
  }

  ngOnInit() { /* 生命週期函式 */
  }

}

注：在使用服務的元件中引入服務，需要注意路徑的對映；'./' 表當前一層，'../'表當前一層的往上一層，依次'../../'表當前一層的往上兩層；