Angular 2 - 服務

當某個公共功能需要提供給多個模組時，就會用到服務。例如，我們可以有一個數據庫功能，可以在多個模組中重複使用。因此，您可以建立一個包含資料庫功能的服務。

建立服務時，需要執行以下關鍵步驟。

步驟 1 - 建立一個單獨的類，該類具有可注入裝飾器。可注入裝飾器允許將此類的功能注入並在任何 Angular JS 模組中使用。

@Injectable() 
   export class classname {  
} 

步驟 2 - 接下來，在您的 appComponent 模組或您想要使用該服務的模組中，您需要在 @Component 裝飾器中將其定義為提供程式。

@Component ({  
   providers : [classname] 
})

讓我們來看一個如何實現此目標的示例。以下是涉及的步驟。

步驟 1 - 為名為 app.service.ts 的服務建立一個 ts 檔案。

步驟 2 - 將以下程式碼放在上面建立的檔案中。

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

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
} 

關於上述程式，需要注意以下幾點。

• Injectable 裝飾器是從 angular/core 模組匯入的。

• 我們正在建立一個名為 appService 的類，該類用 Injectable 裝飾器裝飾。

• 我們正在建立一個名為 getApp 的簡單函式，它返回一個名為“Hello world”的簡單字串。

步驟 3 - 在 app.component.ts 檔案中，放置以下程式碼。

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

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
} 

關於上述程式，需要注意以下幾點。

• 首先，我們在 appComponent 模組中匯入我們的 appService 模組。

• 然後，我們將服務註冊為該模組中的提供程式。

• 在建構函式中，我們定義了一個名為 _appService 的變數，其型別為 appService，以便可以在 appComponent 模組中的任何位置呼叫它。

• 例如，在 ngOnInit 生命週期鉤子中，我們呼叫了服務的 getApp 函式並將輸出分配給 AppComponent 類的 value 屬性。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。