面试题：Angular服务的依赖注入机制及简单实现

Question

请阐述Angular服务中依赖注入的基本原理，并举例说明如何创建一个简单的服务并将其注入到组件中。

Answer 1

Angular服务中依赖注入的基本原理

1. 原理概述：
   • Angular依赖注入（Dependency Injection，简称DI）是一种设计模式，它允许在组件或其他类中自动提供所依赖的对象，而不是让组件自己创建这些对象。
   • 核心概念是将依赖关系从依赖它们的组件中解耦出来，由一个注入器（Injector）负责创建和管理依赖对象，并将其注入到需要的地方。
   • 注入器维护一个依赖提供者（Provider）的注册表，当组件请求一个依赖时，注入器根据注册表查找相应的提供者来创建或返回已经创建好的依赖实例。
2. 工作流程：
   • 当组件需要一个依赖（例如一个服务）时，它向其最近的注入器请求该依赖。
   • 注入器首先检查自己的缓存中是否已经有该依赖的实例。如果有，则直接返回该实例。
   • 如果缓存中没有，注入器会查找其注册表，找到对应的提供者（provider）。提供者会创建依赖的实例，然后注入器将该实例返回给组件，并将其缓存起来，以便下次相同的请求可以直接从缓存中获取。

创建简单服务并注入到组件中的示例

1. 创建服务：
   • 使用Angular CLI命令创建一个新的服务，例如hero.service.ts：

   ng generate service hero
   

   • 打开生成的hero.service.ts文件，内容如下：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class HeroService {
     getHeroes() {
       return ['Superman', 'Batman', 'Wonder Woman'];
     }
   }
   

   • @Injectable装饰器标记这个类是一个可注入的服务。providedIn: 'root'表示这个服务在根注入器中提供，意味着整个应用中只会有一个该服务的实例。
2. 将服务注入到组件中：
   • 假设我们有一个app.component.ts组件，如下：

   import { Component } from '@angular/core';
   import { HeroService } from './hero.service';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     heroes: string[];
     constructor(private heroService: HeroService) {
       this.heroes = this.heroService.getHeroes();
     }
   }
   

   • 在组件的构造函数中，通过private heroService: HeroService将HeroService注入到组件中。这样组件就可以使用HeroService的getHeroes方法来获取数据。
3. 在模板中展示数据：
   • 在app.component.html模板中可以展示获取到的英雄数据：

   <ul>
     <li *ngFor="let hero of heroes">{{ hero }}</li>
   </ul>
   

通过以上步骤，就完成了一个简单服务的创建以及将其注入到组件中的过程。