資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 Angular 8 服務？
在 Angular 中，服務是單例物件，通常只為整個 Angular 應用程式例項化一次。每個服務包含多個方法，其中包括一些要執行的功能。這是一種在一種或多種元件中共享功能或職責的機制。
我們知道，使用 Angular，我們可以建立基於巢狀的元件。一旦我們的應用程式巢狀，我們可能需要使用相同的功能。與其在多個元件中編寫相同的程式碼，不如在一個地方編寫程式碼，然後與不同的元件共享資料。使用服務來處理這個問題是最好的方法。
在 Angular 的早期版本中，我們習慣於使用提供程式、工廠、委託、值等來建立服務，並且清楚地知道需要使用哪一個。但是，在 Angular 8 中，它使透過以下兩種方法建立服務變得清晰。
使用 @Injector 裝飾器建立服務
使用依賴注入註冊類或注入類。
讓我們看看下面如何在我們的應用程式中定義服務。
我們可以根據需要建立自己的服務。要建立服務，請按照以下步驟操作。
首先建立一個帶有正確名稱的 service.ts 檔案。
在此檔案中，從 @angular/core 包匯入 Injectable 併為類的開頭提供 @Injectable 裝飾器。
匯出類物件。這樣我們就可以在其他元件中使用此服務。
根據匯出類物件中的需求編寫業務邏輯。
注意
當我們使用提供程式元資料建立自己的服務時，我們需要在 app.module.ts 檔案中匯入它才能使用該服務的的功能。如果我們沒有匯入建立的服務，它將對整個應用程式不可見。如果我們只在一個元件中匯入建立的服務而沒有匯入到主模組中，則該服務僅對該特定元件可用。如果我們在主模組中提供服務，則只會為整個應用程式建立服務的單個例項。
讓我們看看下面的程式碼。
示例
在 app 資料夾中建立一個服務類。我在 app 資料夾中建立了 getMessageService.service.ts 檔案。
在 **getMessageService.service.ts** 檔案中新增如下程式碼。
import { Injectable } from '@angular/core'; @Injectable() export class GetMessageService { constructor() { } showMessage(message: string) { return "Message from angular service"; } }
在這裡，@Injectable 是 Angular 中的一個裝飾器。裝飾器幫助我們提供修改或使用類、方法、屬性和引數的能力。這個 Injectable 就像一個普通的類。當我們建立一個 Injectable 類的物件時，就像 ngOnInIt() 方法一樣，建構函式將被執行。
@Injectable 指出此處此特定類可以與依賴注入器一起使用。如果我們想將服務注入到其他元件中，必須定義 @Injectable() 裝飾器。
Injectable 服務無法銷燬。如果我們想刪除服務類的例項，我們需要刪除該類的依賴注入的引用點。
現在，讓我們直接在我們的主模組（即 **app.module.ts**）中匯入服務類。例如：
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { GetMessageService } from "./getMessageService.service"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [GetMessageService], bootstrap: [AppComponent] }) export class AppModule {};
在這裡，我們將服務類作為提供程式匯入。在 @NgModule 中，我們有四個部分。
宣告 - 定義匯入的元件和指令
匯入 - 定義匯入的模組
提供程式 - 定義匯入的服務
引導 - 定義要顯示資料的根元件
現在，讓我們注入服務類並從服務中獲取資料並在 UI（即 **app.component.ts** 檔案）中顯示。
import { Component } from '@angular/core'; import { GetMessageService } from './getMessageService.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string = ""; constructor(private msgService: GetMessageService ) {} ngOnInit() { this.message = this.msgService.showMessage (); } }
在 **app.component.html** 檔案中
<p>Service example</p> <p>{{message}}</p>
輸出
Service example Message from angular service
像這樣，我們可以建立自定義服務，並與多個元件共享資料。
上面，我們討論了什麼是服務以及它的用途。如何建立它們。我們主要使用服務來與一個或多個元件共享公共資料或功能。使用服務，我們可以實現程式碼可重用性。
144 次檢視
