什么是 Angular 应用里的 Custom provider

Angular 应用中的自定义提供者（Custom Provider）是指通过 Angular 的依赖注入系统提供自定义服务的方式。在Angular中，依赖注入是一种设计模式，通过该模式，组件、指令、服务等可以从外部提供的服务中获取依赖项，而无需自己实例化或管理这些依赖项。Custom Provider 允许开发者定义自己的服务提供方式，以满足特定应用场景的需求。

在Angular中，Provider 可以是以下三种类型：Value Provider、Factory Provider 和 Class Provider。Custom Provider 的定义方式取决于所选择的 Provider 类型。下面将详细介绍这三种 Provider 的概念和用法，并提供示例代码。

Value Provider

Value Provider 允许我们直接提供一个值作为服务。这个值可以是任何 JavaScript 对象，包括原始类型、对象、数组等。

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

// 定义 InjectionToken 作为依赖注入的令牌
export const MY_VALUE = new InjectionToken<string>('myValue');

// 提供一个字符串值
const myValueProvider = { provide: MY_VALUE, useValue: 'Hello, Custom Provider!' };

Factory Provider

Factory Provider 允许我们提供一个工厂函数，该函数返回所需的服务实例。这样我们可以在创建服务时执行一些逻辑，例如配置、初始化等。

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

@Injectable()
export class MyService {
  getMessage(): string {
    return 'Hello, Custom Provider from MyService!';
  }
}

// 定义工厂函数
export function myServiceFactory() {
  return new MyService();
}

// 提供 MyService 的工厂函数
const myServiceFactoryProvider = { provide: MyService, useFactory: myServiceFactory };

Class Provider

Class Provider 允许我们直接提供一个类，Angular 会使用该类来创建服务的实例。这个类必须使用 @Injectable() 装饰器进行标记。

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

@Injectable()
export class AnotherService {
  getMessage(): string {
    return 'Hello, Custom Provider from AnotherService!';
  }
}

// 提供 AnotherService 类
const anotherServiceProvider = { provide: AnotherService, useClass: AnotherService };

使用自定义提供者

在组件或其他 Angular 元素中使用自定义提供者的方式是通过构造函数的参数进行依赖注入。

import { Component, Inject } from '@angular/core';
import { MY_VALUE, AnotherService, MyService } from './providers';  // 假设在同一目录下存在providers文件

@Component({
  selector: 'app-custom-provider',
  template: `
    <div>{{ myValue }}</div>
    <div>{{ myServiceMessage }}</div>
    <div>{{ anotherServiceMessage }}</div>
  `,
})
export class CustomProviderComponent {
  constructor(
    @Inject(MY_VALUE) public myValue: string,
    private myService: MyService,
    private anotherService: AnotherService
  ) {}

  get myServiceMessage(): string {
    return this.myService.getMessage();
  }

  get anotherServiceMessage(): string {
    return this.anotherService.getMessage();
  }
}

通过以上示例，我们可以看到如何通过自定义提供者为 Angular 应用中的组件、服务等元素提供所需的依赖项。这样的设计使得应用的组织结构更加清晰，代码更易维护。

Custom Provider 的灵活性和强大性在于它可以根据实际需求选择合适的提供方式，无论是简单的值、复杂的工厂函数，还是具有逻辑的类，都可以通过自定义提供者来满足应用的特定需求。