面试题：Angular中的依赖注入原理及应用场景

Angular依赖注入的底层原理

注入器树
- Angular应用是基于组件树构建的，每个组件都可以有自己的注入器。注入器形成了一棵树状结构，根注入器位于树的顶端，为整个应用提供依赖对象。
- 当一个组件需要某个依赖时，它首先会向自己的注入器请求。如果该注入器没有提供该依赖，它会沿着注入器树向上查找，直到找到能够提供该依赖的注入器为止。
令牌（Token）
- 依赖注入使用令牌来标识依赖。令牌可以是类、字符串或InjectionToken对象。例如，当注册一个服务时，通常使用服务的类作为令牌，表明该类对应的实例是要注入的依赖。
提供器（Provider）
- 提供器用于告诉注入器如何创建和提供依赖对象。常见的提供器类型有ClassProvider（用于提供类的实例）、ValueProvider（用于提供值，如常量）和FactoryProvider（用于通过工厂函数创建对象）。
- 当注入器接收到对某个令牌的依赖请求时，它会查找对应的提供器，并根据提供器的规则创建或返回依赖对象。

管理组件之间的依赖关系

组件声明依赖

在组件的构造函数中声明依赖。例如：

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

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

这里MyComponent声明了对MyService的依赖，Angular的注入器会负责创建或获取MyService的实例并注入到MyComponent中。

避免组件间强耦合
- 通过依赖注入，组件不需要自己去创建所依赖的对象，而是由注入器提供。这使得组件与它所依赖的对象之间解耦，组件只关心依赖对象提供的接口，而不关心其具体实现。例如，如果MyService有多个实现版本，只需要在注入器中更改提供器的配置，MyComponent无需修改代码就可以使用不同的实现。

实际开发场景及关键作用

服务复用
- 场景：多个组件可能需要使用相同的服务，如用户认证服务、日志服务等。
- 关键作用：依赖注入确保整个应用中只创建一份服务实例（如果使用单例模式），提高了资源利用效率，并且方便对服务进行统一管理和维护。
- 正确使用：在根模块或共享模块中提供服务。例如，对于日志服务LoggerService：
```
import { NgModule } from '@angular/core';
import { LoggerService } from './logger.service';

@NgModule({
  providers: [LoggerService]
})
export class SharedModule {}
```
然后在各个组件中通过构造函数注入：
```
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app - another - component',
  templateUrl: './another - component.html'
})
export class AnotherComponent {
  constructor(private logger: LoggerService) {}
}
```

测试组件

场景：在单元测试组件时，需要模拟其依赖对象，以便专注于测试组件本身的逻辑。
关键作用：依赖注入使得替换真实依赖为模拟对象变得容易，从而可以隔离组件进行测试。
正确使用：在测试用例中，使用测试模块的TestBed来配置提供器，提供模拟对象。例如，测试MyComponent：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my - component';
import { MyService } from './my - service';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        {
          provide: MyService,
          useValue: {
            // 模拟MyService的方法
            someMethod: () => 'Mocked result'
          }
        }
      ]
    }).compileComponents();

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

动态配置

场景：应用可能需要根据不同的环境或用户设置动态加载不同的服务实现。
关键作用：依赖注入可以通过配置不同的提供器来实现动态切换服务实现，而无需修改大量的组件代码。
正确使用：可以根据环境变量在模块的forRoot方法中配置不同的提供器。例如，在AppModule中：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ProductionService } from './production.service';
import { DevelopmentService } from './development.service';

@NgModule({
  declarations: [AppComponent],
  imports: [],
  providers: [
    {
      provide: MyService,
      useClass: environment.production? ProductionService : DevelopmentService
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

星途面试题库

面试题：Angular中的依赖注入原理及应用场景

知识考点

面试题答案

Angular依赖注入的底层原理

管理组件之间的依赖关系

实际开发场景及关键作用