{% 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 service output](img/36e79201fe5ce97c3c7e8bb3b815a8a0.png)

Angular 2 服务输出



将我的问题放在评论部分。

学习愉快！

[源码下载](https://howtodoinjava.com/wp-content/downloads/angular2-service.zip)

{% endraw %}