Angular 4 组件服务注入

在 Angular 4 中，组件服务注入是一个非常重要的概念。通过服务注入，我们可以在组件中使用服务提供的功能，实现组件与服务的解耦，让代码更加模块化和可维护。

创建服务

首先，我们需要创建一个服务。服务可以通过 Angular CLI 的命令来生成：

ng generate service my-service

这将在项目中生成一个名为 my-service 的服务文件，并且会自动将服务添加到 Angular 模块的 providers 列表中。

注入服务

要在组件中使用服务，我们需要在组件的构造函数中注入服务。例如，假设我们有一个名为 MyService 的服务，我们可以这样在组件中注入：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { MyService } from './my-service';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>{{ message }}</h1>
  `
})
export class MyComponent {
  message: string;

  constructor(private myService: MyService) {
    this.message = this.myService.getMessage();
  }
}

在上面的代码中，我们通过构造函数将 MyService 注入到 MyComponent 中，并在组件初始化时调用服务提供的 getMessage 方法。

注入多个服务

有时候，我们可能需要在一个组件中注入多个服务。这可以通过在构造函数中依次注入多个服务来实现：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { MyService1 } from './my-service1';
import { MyService2 } from './my-service2';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>{{ message }}</h1>
  `
})
export class MyComponent {
  message: string;

  constructor(private myService1: MyService1, private myService2: MyService2) {
    this.message = this.myService1.getMessage() + ' ' + this.myService2.getMessage();
  }
}

在上面的代码中，我们同时注入了 MyService1 和 MyService2 两个服务，并在组件初始化时分别调用它们提供的 getMessage 方法。

通过组件服务注入，我们可以方便地在组件中使用服务提供的功能，实现组件与服务的解耦，让代码更加模块化和可维护。