面试题：Angular 自定义指令与服务及依赖注入的深度结合应用

依赖注入服务到自定义指令

在指令类中声明依赖：在 Angular 中，通过构造函数进行依赖注入。假设存在 DataValidationService 和 LoggerService，自定义指令类如下：

import { Directive, Inject } from '@angular/core';
import { DataValidationService } from './data - validation.service';
import { LoggerService } from './logger.service';

@Directive({
  selector: '[appDataValidation]'
})
export class DataValidationDirective {
  constructor(
    private dataValidationService: DataValidationService,
    private loggerService: LoggerService
  ) {}
}

模块中提供服务：确保在相关的 Angular 模块中提供这些服务。如果服务是全局性的，通常在 app.module.ts 中提供：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { DataValidationDirective } from './data - validation.directive';
import { DataValidationService } from './data - validation.service';
import { LoggerService } from './logger.service';

@NgModule({
  declarations: [
    AppComponent,
    DataValidationDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    DataValidationService,
    LoggerService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

确保复用性和可维护性

保持指令功能单一：让指令专注于数据验证这一核心功能，通过依赖注入获取外部服务来辅助完成任务。这样每个指令职责明确，易于理解和维护。
避免硬编码：不直接在指令中创建服务实例，而是通过依赖注入，使得指令可以在不同环境中复用，因为依赖的服务可以在不同模块或组件级别被替换或配置。
使用接口和抽象类：如果可能，为服务定义接口或抽象类，指令依赖于这些抽象而不是具体实现。这样在测试时可以提供模拟实现，并且在未来更换服务实现时，指令代码无需修改。例如：

export interface IDataValidationService {
  validate(data: any): boolean;
}

@Injectable()
export class DataValidationService implements IDataValidationService {
  validate(data: any): boolean {
    // 实际验证逻辑
  }
}

@Directive({
  selector: '[appDataValidation]'
})
export class DataValidationDirective {
  constructor(private dataValidationService: IDataValidationService) {}
}

依赖注入过程中可能遇到的问题及解决方案

循环依赖：
- 问题：当 A 服务依赖 B 服务，而 B 服务又依赖 A 服务时会出现循环依赖。例如 DataValidationService 依赖 LoggerService，而 LoggerService 又依赖 DataValidationService。
- 解决方案：重构代码，避免这种相互依赖。可以将共享逻辑提取到一个独立的服务中，或者调整依赖关系，使得依赖链是单向的。如果无法避免，可以使用 @Inject 装饰器的 optional 参数来标记依赖为可选，并在代码中适当处理可能的 null 值。
服务实例不一致：
- 问题：在不同模块或组件中可能出现服务实例不一致的情况，导致数据不同步或逻辑混乱。
- 解决方案：确保服务在应用程序的适当级别提供。如果是全局单例服务，在根模块（如 app.module.ts）中提供。如果需要在组件级别有不同实例，可以在组件的 providers 数组中提供服务。
注入未定义的服务：
- 问题：在指令中注入了一个未在任何地方提供的服务，导致运行时错误。
- 解决方案：仔细检查模块和组件的 providers 配置，确保所需服务都已正确提供。同时，可以使用 @Optional() 装饰器来标记可缺失的依赖，并在指令代码中进行相应的逻辑处理，以避免因依赖缺失而导致应用崩溃。

星途面试题库

面试题：Angular 自定义指令与服务及依赖注入的深度结合应用

知识考点

面试题答案

依赖注入服务到自定义指令

确保复用性和可维护性

依赖注入过程中可能遇到的问题及解决方案