解释在 Angular 2 中创建服务的步骤

如果您曾经构建过一个组件，您就会知道该组件包含一个可执行代码，允许您包含任何您想要的功能。组件的任务是实现用户体验，这将与用户交互。该组件将充当业务逻辑和应用程序视图之间的中间体。然而，官方 Angular 风格指南指出将组件的逻辑限制为视图所需的内容。服务应处理所有其他逻辑。组件代码中的代码主要用于控制和操作用户界面。它应该调用服务来提供与 UI 不直接相关的功能。因此，如果视图不需要所需的功能，您应该考虑构建服务。

服务用于创建可以共享的变量/数据，并且可以在定义它的组件之外使用。服务本质上是具有特定目标的类。服务可以是应用程序需要的变量、函数或特性。我们经常使用服务来提供独立于组件的功能，在组件之间传输数据或逻辑，或者封装数据访问等外部交互。通过将这些活动从组件转移到服务，代码变得更容易测试、调试和重用。服务是可被各种组件使用的可重用功能。服务可用于避免重写相同的代码，它可以编写一次并注入到使用该特定服务的所有组件中。

必须对服务承担单一责任。您不应该只是将所有共享功能放在应用程序中的单个服务中。服务是可以在应用程序需要的时间和地点提供的附加功能。我们通过将我们的服务与依赖注入系统集成来使用 Angular 实现这一点。为了生成服务，我们可以遵循两种方式：

• 通过手动创建它来执行特定任务，我们需要设置和配置服务。
• 通过使用 Angular CLI，它将自动为服务设置所有必要的配置。

我们将依次通过示例来理解这两种方法。

方法一：使用手动方式生成服务：

我们将创建服务类，使用装饰器来描述元数据，然后导入我们需要的内容。这些与我们用于手动构建组件和自定义管道的基本技术相同。

句法：

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

@Injectable()  

export class ServiceName {  

}

让我们看一下构建一个基本服务的代码，该服务的函数是返回某个学院必须提供的课程列表。

第 1 步：创建类 CoursesService 并将文件保存为 courses.service.ts 。不要忘记导出类，以便任何组件都可以使用该服务。让我们将 getdata 方法添加到这个类。

export class CoursesService {    // SERVICE CLASS

    constructor() { }
    
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

第 2 步：然后使用装饰器装饰服务元数据。我们在创建服务时使用 Injectable 装饰器。因为装饰器是一个函数，所以它应该被一个左括号和右括号括起来。

@Injectable()      // DECORATOR

export class CoursesService {

 constructor() { }
 
 getdata(): string[] {
   return ['C','C++', 'JAVA', 'Python'];
 }
}

第 3 步：确保定义了正确的导入。现在我们的服务类已经准备好了。

courses.service.ts

// IMPORT STATEMENT
import { Injectable } from '@angular/core';
  
@Injectable()
  
export class CoursesService {
  
    constructor() { }
  
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

第 4 步：现在，我们需要注入我们的服务。该服务可以通过两种方式注入。

• 作为全局服务注入：将服务注入根模块，使其成为全局服务。该模块内的任何组件现在都可以使用该服务。

  app.module.ts

  import { BrowserModule } from "@angular/platform-browser";
  import { NgModule } from "@angular/core";
  import { AppComponent } from "./app.component";
  import { CoursesService } from "src/services/courses.service";
    
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [CoursesService], // FOR GLOBAL SERVICE
    bootstrap: [AppComponent],
  })
  export class AppModule {}
  

• 作为本地服务注入：将服务直接注入到组件中以作为本地服务注入。

  app.component.ts

  import { Component } from "@angular/core";
  import { CoursesService } from "src/services/courses.service";
    
  @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [CoursesService], // FOR LOCAL SERVICE
  })
  export class AppComponent {}
  

第五步：在这一步中，我们需要将服务导入组件并使用方法。

app.component.ts

import { Component } from "@angular/core";
import { CoursesService } from "src/services/courses.service";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  courses: string[];
  
  constructor(private _coursesService: CoursesService) {}
  
  ngOnInit() {
    this.courses = this._coursesService.getdata();
  }
}

第 6 步：更新 HTML 组件以呈现它。

app.component.html

Course List
{{ c }}

第 7 步：运行“ ng serve ”启动应用程序。我们将看到如下输出：

方法 2：使用 Angular CLI 生成服务。我们将在此处使用相同的示例在 Angular CLI 中生成服务。

第 1 步：我们将使用 Angular CLI 创建服务。建议使用此方法，因为出错的机会较少。只需一个命令即可完成任务。我们将按照以下语法创建服务。

句法：

ng g service courses

它将生成如下服务代码框架：

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

@Injectable()
  
export class ServiceName {   
    constructor() { }
}

第二步：服务创建好后，我们要把它包含在app.module.ts的providers中

providers: [CoursesService],

此处，服务名称的第一个字母应为大写，后跟 Service，不带空格。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoursesService } from './courses.service';
  
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [CoursesService], //FOR GLOBAL SERVICE
  bootstrap: [AppComponent]
})
export class AppModule {}

第 3 步：在app.component.ts 中，进行以下更改：

在其余所需的导入中导入服务。

import { CoursesService } from './courses.service';

创建任何类型的变量：课程不提及任何类型。

在构造函数中定义服务类型的属性

constructor(private _coursesService: CoursesService) {}

另外，创建一个ngOnInit方法：

ngOnInit() {
   this.courses = this._coursesService.getdata();
 }

完成上述任务后， app.component.ts文件将如下所示：

app.component.ts

import { Component } from '@angular/core';
import { CoursesService } from './courses.service';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses: string[];
  
  constructor(private _coursesService: CoursesService) {}
  
  ngOnInit() {
    this.courses = this._coursesService.getdata();
  }
}

第 4 步：在这一步中，我们将把我们的方法添加到服务中。

课程.service.ts

import { Injectable } from '@angular/core';  
  
@Injectable()  
  
export class CoursesService {  
      
    constructor() { }
      
    getdata(): string[] {
        return ['C','C++', 'JAVA', 'Python'];
    }
}

第 5 步：在app.component.html 中，我们将打印存储在课程中的数据。

app.component.html

Course List
{{ c }}

第6步：运行' ng serve '，将显示以下输出。