面试题：Angular依赖注入机制中的Provider是什么

Provider概念

Provider是Angular依赖注入系统中用于创建和提供依赖对象的配置。它告诉Angular如何创建一个特定类型的对象实例，并且在应用程序需要该对象时能够提供给它们。可以将Provider看作是一种工厂，负责生产和提供组件、服务等所需的依赖。

工作原理

注册Provider：在Angular应用中，通常在模块（NgModule）的providers数组中注册Provider。当模块被加载时，Angular会解析这些Provider并创建相应的注入器（Injector）。
依赖查找：当一个组件或服务需要某个依赖时，它会向其所在的注入器请求该依赖。注入器会从已注册的Provider中查找能够提供该依赖的Provider。
实例化依赖：如果找到对应的Provider，注入器会根据Provider的配置来创建依赖对象的实例。这可能涉及到直接创建新实例、使用已有的单例实例，或者通过其他复杂逻辑创建实例。
返回依赖：创建好的依赖实例会被返回给请求的组件或服务，从而满足其依赖需求。

常见使用场景举例

服务提供：
- 假设我们有一个简单的LoggerService，用于记录日志。
- 首先创建LoggerService：

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

@Injectable()
export class LoggerService {
  log(message: string) {
    console.log(`LOG: ${message}`);
  }
}

然后在模块中注册LoggerService的Provider：

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

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

组件中使用LoggerService：

import { Component } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app - component',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Component initialized');
  }
}

别名提供：有时可能需要使用不同的名称来提供同一个服务。例如，我们有一个UserService，但在某些情况下希望以AdminUserService的别名来提供它。
- 创建UserService：

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

@Injectable()
export class UserService {
  getUserName() {
    return 'Default User';
  }
}

在模块中注册别名Provider：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { UserService } from './user.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    UserService,
    { provide: 'AdminUserService', useExisting: UserService }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

组件中使用别名服务：

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

@Component({
  selector: 'app - component',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(@Inject('AdminUserService') private adminUserService: UserService) {
    console.log(this.adminUserService.getUserName());
  }
}

使用FactoryProvider动态创建实例：假设我们需要根据不同的环境变量创建不同配置的ApiService。
- 创建ApiService：

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

@Injectable()
export class ApiService {
  constructor(private apiUrl: string) {}
  callApi() {
    console.log(`Calling API at ${this.apiUrl}`);
  }
}

创建工厂函数：

import { Inject, Injectable, InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

export function apiServiceFactory(apiUrl: string) {
  return new ApiService(apiUrl);
}

在模块中注册FactoryProvider：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { apiServiceFactory, API_URL } from './api.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: ApiService,
      useFactory: apiServiceFactory,
      deps: [API_URL]
    },
    { provide: API_URL, useValue: 'https://example.com/api' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

组件中使用ApiService：

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app - component',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private apiService: ApiService) {
    this.apiService.callApi();
  }
}

面试题：Angular依赖注入机制中的Provider是什么

知识考点

面试题答案

Provider概念

工作原理

常见使用场景举例