面试题：Angular中TypeScript的依赖注入基础应用

Question

在Angular应用中，如何使用TypeScript来创建一个简单的服务，并通过依赖注入将其注入到组件中？请写出关键代码示例，并解释依赖注入在这种场景下的优势。

Answer 1

创建服务

1. 创建服务类：使用Angular CLI命令 ng generate service my - service 可快速生成一个服务类。以下是手动创建服务类的代码示例：

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getMessage(): string {
    return 'Hello from MyService';
  }
}

在上述代码中：

• @Injectable 装饰器标记这个类是一个可注入的服务。
• providedIn: 'root' 表示该服务在根模块中提供，这是Angular 6及以上版本推荐的方式，意味着这个服务在整个应用中是单例的。

将服务注入到组件

1. 组件代码示例：

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

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  message: string;
  constructor(private myService: MyService) {
    this.message = this.myService.getMessage();
  }
}

在上述代码中：

• 在组件的构造函数中，通过类型声明 private myService: MyService 将 MyService 注入到组件中。
• 然后可以在组件中使用 myService 实例调用其方法，如 this.myService.getMessage()。

依赖注入的优势

1. 可测试性：通过依赖注入，在测试组件时可以很容易地用模拟服务替换真实服务。例如，在测试 MyComponent 时，可以创建一个模拟的 MyService，并为其 getMessage 方法返回固定的值，这样可以隔离组件与真实服务的依赖，使测试更加简单和可靠。
2. 松耦合：组件依赖于抽象（服务接口）而不是具体的实现。如果服务的实现需要改变，只要接口不变，组件不需要修改。例如，如果 MyService 的 getMessage 方法内部逻辑改变，但方法签名不变，MyComponent 不需要做任何修改，这大大提高了代码的可维护性和可扩展性。
3. 代码复用：服务可以在多个组件中复用。例如，MyService 可以被多个不同的组件注入并使用其 getMessage 方法，避免了在每个组件中重复编写相同的逻辑。