{% raw %} # Angular 服務示例 > 原文： [https://howtodoinjava.com/angular/angular2-service/](https://howtodoinjava.com/angular/angular2-service/) 通過示例學習**創建 Angular 服務**并將服務作為全局依賴項（通過模塊）與局部依賴項（通過組件）導入。 ```java Table of Contents Create Service Global service vs Local Service Injection Demo ``` ## 創建服務 在所需位置創建一個新文件`calc.service.ts`，并將以下代碼放入其中。 `CalcService`是服務名稱。 ```java import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CalcService { constructor() { } } ``` 以上服務非常完整，可以在應用組件中使用。 #### 使用 Angular CLI 如果使用 Angular CLI，創建服務很容易。 這只是一個命令，可以完成所有工作。 它將像上面的示例一樣生成服務代碼。 ```java $ ng g s service/calc --flat //Other useful options --force = override --spec=false = dont generate spec file --dry-run = dont touch code if it has been updated already. ``` ## 全局服務與本地服務注入 要注入服務，您有兩個選擇。 #### 1）注入為“全局服務” 要作為全局服務注入，請將**服務注入到根模塊**中。 ```java import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { CalcService } from './service/calc.service'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [CalcService], bootstrap: [AppComponent] }) export class AppModule { } ``` #### 2）注入為“本地服務” 要作為本地服務注入，請直接將**服務注入組件**。 ```java import { Component } from '@angular/core'; import { CalcService } from './service/calc.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [CalcService] }) export class AppComponent { title = 'app'; constructor(calc:CalcService){ //Use calc } } ``` ## 演示 #### 1）添加服務方法 為了演示`CalcService`的用法，我們在服務中定義一個新方法，并在`app.component.ts`中使用它。 我添加了方法`add()`，該方法將剩余參數用作數字數組。 然后，將所有數字相加并返回總和。 ```java import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CalcService { constructor() { } public add(...params: number[]): number { let result = 0; for (let val of params) { result += val; } return result; } } ``` #### 2）將服務導入到組件并使用該方法更新模型 我創建了一個新的模型屬性`'sum'`，我們將使用服務方法`add()`的返回值進行更新。 ```java import { Component } from '@angular/core'; import { CalcService } from './service/calc.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; sum: number = 0; constructor(calc:CalcService){ this.sum = calc.add(1,2,3,4); } } ``` #### 3）更新視圖 HTML 現在，最后，使用新添加的模型屬性`sum`更新視圖`html`文件。 ```java <h1> Welcome to {{ title }}! Sum is {{sum}} </h1> ``` #### 4）運行應用 現在，使用命令`'ng serve'`運行該應用，并檢查`'http://localhost:4200/'`的輸出。  Angular 2 服務輸出 將我的問題放在評論部分。 學習愉快！ [源碼下載](https://howtodoinjava.com/wp-content/downloads/angular2-service.zip) {% endraw %}