面试题：Angular服务构建中如何定义依赖注入

Question

在Angular服务构建过程中，阐述如何使用依赖注入来管理服务间的依赖关系，并且给出一个简单示例说明如何在组件中注入一个自定义的服务。

Answer 1

依赖注入管理服务间依赖关系

1. 定义服务：
   • 使用@Injectable()装饰器来定义一个可注入的服务。例如，假设我们有一个LoggerService，用于记录日志。

   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class LoggerService {
       log(message: string) {
           console.log(`[LOG] ${message}`);
       }
   }
   

2. 在其他服务中注入依赖：
   • 假设我们有另一个UserService，它依赖于LoggerService。在UserService的构造函数中注入LoggerService。

   import { Injectable } from '@angular/core';
   import { LoggerService } from './logger.service';
   
   @Injectable()
   export class UserService {
       constructor(private logger: LoggerService) {}
   
       getUser() {
           this.logger.log('Fetching user data');
           // 实际获取用户数据的逻辑
           return { name: 'John Doe' };
       }
   }
   

3. 模块中提供服务：
   • 为了能让依赖注入正常工作，需要在相关模块中提供服务。可以在@NgModule的providers数组中提供服务。

   import { NgModule } from '@angular/core';
   import { LoggerService } from './logger.service';
   import { UserService } from './user.service';
   
   @NgModule({
       providers: [LoggerService, UserService]
   })
   export class AppModule {}
   

在组件中注入自定义服务示例

1. 组件中注入服务：
   • 假设我们有一个AppComponent，需要注入UserService。

   import { Component } from '@angular/core';
   import { UserService } from './user.service';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
       user;
       constructor(private userService: UserService) {}
   
       ngOnInit() {
           this.user = this.userService.getUser();
       }
   }
   

2. 模板显示数据：
   • 在app.component.html中可以显示从UserService获取的数据。

   <div>
       <h1>User Information</h1>
       <p>Name: {{ user.name }}</p>
   </div>