面试题：Angular的依赖注入机制与应用场景

Angular的依赖注入（DI）机制

DI容器的工作原理

注册：在Angular应用中，通过@Injectable()装饰器标记一个类为可注入的服务，并使用providers数组在模块（如NgModule）或组件级别注册该服务。当服务被注册时，DI容器就知道如何创建这个服务的实例。例如：

@Injectable()
export class UserService {
  // 服务逻辑
}

@NgModule({
  providers: [UserService]
})
export class AppModule {}

解析：当组件或其他依赖项需要一个服务时，Angular的DI容器会查找该服务的注册信息。如果是首次请求该服务，容器会根据注册信息创建一个新的实例；如果已经创建过实例，并且服务是单例的（默认情况），则返回已有的实例。例如，一个组件依赖UserService：

@Component({
  selector: 'app-my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  constructor(private userService: UserService) {}
}

这里，DI容器会解析UserService的依赖，并将其注入到MyComponent的构造函数中。 3. 作用域：DI容器具有层次结构。在模块级别注册的服务是应用级单例，在组件级别注册的服务是该组件及其子组件的单例。这种层次结构使得在不同组件中可以有不同实例的服务，同时也能保证在整个应用中某些服务只有一个实例。

如何自定义注入器

创建自定义注入器：可以通过Injector.create()方法创建一个自定义注入器。例如：

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

const injector = Injector.create({
  providers: [
    {
      provide: UserService,
      useClass: MockUserService
    }
  ]
});

这里创建了一个新的注入器，并且重写了UserService的提供方式，使用MockUserService替代了原来的UserService。 2. 使用自定义注入器：在组件或其他需要的地方使用自定义注入器。例如在组件中：

@Component({
  selector: 'app - custom - injector - component',
  templateUrl: './custom - injector - component.html'
})
export class CustomInjectorComponent {
  constructor(private injector: Injector) {
    const userService = injector.get(UserService);
  }
}

这样就可以在组件中使用自定义注入器获取服务实例。

在实际项目中，DI在提高代码可测试性和可维护性方面的应用场景

提高可测试性
- 模拟依赖：在单元测试组件时，通过DI可以轻松地用模拟对象替换实际的服务依赖。例如，假设一个组件依赖HttpService来获取数据，在测试中可以创建一个模拟的HttpService，只返回测试所需的数据，而不需要实际的HTTP请求。这样可以隔离组件的测试，使其不受外部服务的影响。

describe('MyComponent', () => {
  let component: MyComponent;
  let mockHttpService: any;

  beforeEach(() => {
    mockHttpService = {
      getData: jest.fn().mockReturnValue(of({ data: 'test data' }))
    };

    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        {
          provide: HttpService,
          useValue: mockHttpService
        }
      ]
    });

    component = TestBed.createComponent(MyComponent).componentInstance;
  });

  it('should get data from mock service', () => {
    component.ngOnInit();
    expect(mockHttpService.getData).toHaveBeenCalled();
    expect(component.data).toEqual({ data: 'test data' });
  });
});

- **独立测试组件**：DI使得每个组件都可以独立于其依赖进行测试。因为组件依赖的服务可以被替换为简单的模拟对象，所以可以专注于测试组件自身的逻辑，而不用担心依赖服务的实现细节。

2. 提高可维护性 - 模块化和分离关注点：DI有助于将应用程序的不同部分（如服务和组件）分离，每个部分都有明确的职责。例如，UserService负责处理与用户相关的业务逻辑，组件只需要依赖这个服务，而不需要关心其内部实现。这样当UserService的实现需要更改时，只要接口不变，依赖它的组件不需要修改，从而提高了代码的可维护性。 - 易于替换服务实现：在项目发展过程中，可能需要更换某个服务的实现方式。例如，从使用基于HTTP的用户认证服务切换到基于OAuth的认证服务。通过DI，只需要在模块的providers中修改服务的提供方式，而不需要在每个使用该服务的组件中修改代码，使得代码的维护和升级更加容易。

星途面试题库

面试题：Angular的依赖注入机制与应用场景

知识考点

面试题答案

Angular的依赖注入（DI）机制

DI容器的工作原理

如何自定义注入器

在实际项目中，DI在提高代码可测试性和可维护性方面的应用场景