面试题：Angular服务与依赖注入：基础概念及使用

Question

请解释在Angular中服务是什么，为什么要使用依赖注入？请举例说明如何创建一个简单的服务，并在组件中注入使用。

Answer 1

1. Angular中服务的定义

在Angular中，服务是一个广义的概念，它是一个具有特定功能的类，用于封装可复用的代码逻辑，比如处理数据获取、业务逻辑、共享状态等。服务通常是单例的，这意味着在整个应用程序中，同一个服务只会有一个实例。

2. 使用依赖注入的原因

• 解耦组件与服务：通过依赖注入，组件不需要自己创建它所依赖的服务实例，而是由Angular的注入器提供。这样使得组件与具体的服务实现相分离，提高了代码的可测试性和可维护性。例如，在测试组件时，可以很容易地替换真实的服务为模拟服务。
• 提高代码复用性：服务可以在多个组件之间共享，通过依赖注入，不同组件可以方便地获取到所需的服务实例，避免了重复代码。

3. 创建简单服务并在组件中注入使用的示例

创建服务

使用Angular CLI创建服务，在命令行中运行：

ng generate service my - service

这会生成一个名为my - service.service.ts的文件，内容如下：

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getMessage(): string {
    return 'Hello from MyService!';
  }
}

@Injectable装饰器标记这个类为可注入的服务，providedIn: 'root'表示该服务在应用的根模块中提供，这是一种让服务成为单例的方式。

在组件中注入使用

假设我们有一个app.component.ts组件，如下：

import { Component } from '@angular/core';
import { MyService } from './my - service.service';

@Component({
  selector: 'app - root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message: string;

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

在组件的构造函数中，通过类型声明private myService: MyService注入了MyService。然后在组件的构造函数中调用myService的getMessage方法获取消息，并赋值给组件的message属性。在模板app.component.html中可以显示这个消息：

<div>
  {{ message }}
</div>