Angular 17+ 高级教程 – Dependency Injection 依赖注入

class ServiceA {
  plus(num1: number, num2: number) {
    return num1 + num2;
  }
}

class ServiceB {
  plusAndTimesTwo(num1: number, num2: number) {
    return (num1 + num2) * 2;
  }
}

class ServiceB {
  plusAndTimesTwo(num1: number, num2: number) {
    const serviceA = new ServiceA();
    const afterPlus = serviceA.plus(num1, num2);
    
    return afterPlus * 2;
  }
}

export class ServiceA {
  plus(num1: number, num2: number) {
    return num1 - num2;
  }
}

export class ServiceB {
  plusAndTimesTwo(num1: number, num2: number) {
    const serviceA = new ServiceA();
    const afterPlus = serviceA.plus(num1, num2);

    return afterPlus * 2;
  }
}

it("test", () => {
  const service = new ServiceB();
  const result = service.plusAndTimesTwo(1, 1);
  expect(result).toBe(4); // (1 + 1) * 2 = 4
});

export class ServiceB {
  constructor(private serviceA: ServiceA) {}

  plusAndTimesTwo(num1: number, num2: number) {
    const afterPlus = this.serviceA.plus(num1, num2);

    return afterPlus * 2;
  }
}

it("test ServiceB.plusAndTimesTwo()", () => {
  const serviceA = {
    plus() {
      return 2;
    },
  } satisfies ServiceA;

  const service = new ServiceB(serviceA);
  const result = service.plusAndTimesTwo(1, 1);
  expect(result).toBe(4); // (1 + 1) * 2 = 4
});

class ServiceA {}

class ServiceB {
  constructor(serviceA: ServiceA) {}
}

class ServiceC {
  constructor(serviceB: ServiceB) {}
}

const serviceA = new ServiceA();
const serviceB = new ServiceB(serviceA);
const serviceC = new ServiceC(serviceB);

const serviceC = new ServiceC(new ServiceB(new ServiceA()));

const serviceC = new ServiceC(new ServiceB(new ServiceA()));

const injector = Injector.create({
  providers: [ServiceA, ServiceB, ServiceC]
});
const serviceC = injector.get(ServiceC);

class ServiceC {
  constructor(serviceB: ServiceB) {}
}

class ServiceA {}

@Injectable()
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

const injector = Injector.create({
  providers: [ServiceA, ServiceB],
});
const serviceB = injector.get(ServiceB);

const serviceB = new ServiceB(new ServiceA());

class ServiceB {
  constructor(serviceA: ServiceA) {}
}

@Injectable()
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

@Injectable()
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

class ServiceC {
  constructor(serviceA: ServiceA) {}
}

const injector = Injector.create({
  providers: [ServiceA, ServiceB, ServiceC],
});

const serviceB = injector.get(ServiceC);

const injector = Injector.create({
  providers: [{ provide: 'key', useValue: 'hello world' }],
});

const value = injector.get('key');
console.log(value); // 'hello world'

const myValueProvider: FactoryProvider = {
  provide: 'key',
  useFactory: () => {
    return 'my value';
  },
};

const injector = Injector.create({
  providers: [myValueProvider],
});

const value = injector.get('key'); // my value

const MY_VALUE_TOKEN = new InjectionToken<string>('MyValue');

const myValueProvider: FactoryProvider = {
  provide: MY_VALUE_TOKEN,
  useFactory: (): string => {
    return 'my value';
  },
};

const injector = Injector.create({
  providers: [myValueProvider],
});

const value = injector.get(MY_VALUE_TOKEN);

type GetInjectionTokenType<T> = T extends InjectionToken<infer R> ? R : never;

const myValueProvider: FactoryProvider = {
  provide: MY_VALUE_TOKEN,
  useFactory: (): GetInjectionTokenType<typeof MY_VALUE_TOKEN> => {
    return 'my value';
  },
};

const MY_VALUE_1_TOKEN = new InjectionToken<string>('MyValue1');
const MY_VALUE_2_TOKEN = new InjectionToken<string>('MyValue2');

const myValue1Provider: FactoryProvider = {
  provide: MY_VALUE_1_TOKEN,
  useFactory: () => 'my value 1',
};

const myValue2Provider: FactoryProvider = {
  provide: MY_VALUE_1_TOKEN,
  useFactory: (myValue1: string) => myValue1 + 'and my value 2',
  deps: [MY_VALUE_1_TOKEN],
};

const injector = Injector.create({
  providers: [myValue1Provider, myValue2Provider],
});

const value2 = injector.get(MY_VALUE_2_TOKEN); // my value 1 and my value 2

const myValue2Provider: FactoryProvider = {
  provide: MY_VALUE_1_TOKEN,
  useFactory: (myValue1: string) => myValue1 + 'and my value 2',
  deps: [MY_VALUE_1_TOKEN],
};

const VALUE_TOKEN = new InjectionToken<string>('Value');

const valueProvider: ValueProvider = {
  provide: VALUE_TOKEN,
  useValue: 'Derrick',
};

const injector = Injector.create({
  providers: [valueProvider],
});

const name = injector.get(VALUE_TOKEN);
console.log(name); // 'Derrick'

const valueProvider: FactoryProvider = {
  provide: VALUE_TOKEN,
  useFactory: () => 'Derrick'
};

class ServiceA {}
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

const injector = Injector.create({
  providers: [
    ServiceA,
    ServiceB satisfies TypeProvider,
  ],
});

providers: [
  ServiceA,
  { provide: ServiceB, deps: [ServiceA] } satisfies ConstructorProvider
],

const SERVICE_B_TOKEN = new InjectionToken<ServiceB>('ServiceB');

providers: [
  ServiceA,
  { provide: SERVICE_B_TOKEN, useClass: ServiceB } satisfies ClassProvider,
],

const serviceB = injector.get(SERVICE_B_TOKEN);

{ provide: AnimalService, useClass: DogService } satisfies ClassProvider,

providers: [
  ServiceA,
  { provide: SERVICE_B_TOKEN, useClass: ServiceB, deps: [ServiceA] } satisfies StaticClassProvider,
],

providers: [
  { provide: ServiceA, useFactory: () => new ServiceA() },
  {
    provide: SERVICE_B_TOKEN,
    useFactory: (serviceA: ServiceA) => new ServiceB(serviceA),
    deps: [ServiceA],
  },
],

const NAME_1_TOKEN = new InjectionToken<string>('Name1');
const NAME_2_TOKEN = new InjectionToken<string>('Name2');

const injector = Injector.create({
  providers: [
    { provide: NAME_1_TOKEN, useValue: 'Derrick' },
    { provide: NAME_2_TOKEN, useExisting: NAME_1_TOKEN },
  ],
});

const name = injector.get(NAME_2_TOKEN);
console.log(name); // 'Derrick'

{ provide: NAME_2_TOKEN, useFactory: (name1: string) => name1, deps: [NAME_1_TOKEN] },

class ServiceA {}

@Injectable()
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

const injector = Injector.create({
  providers: [ServiceA, ServiceB],
});

const serviceB = injector.get(ServiceB);

const VALUE_TOKEN = new InjectionToken<string>('Value');

@Injectable()
class ServiceB {
  constructor(value: string) {} 
}

const injector = Injector.create({
  providers: [{ provide: VALUE_TOKEN, useValue: 'value 123' }, ServiceB],
});

const serviceB = injector.get(ServiceB);

这样也不对，虽然表达了依赖的 key，但是 VALUE_TOKEN 是 variable，不是类型，语法错误。

要解决这个问题有 2 种方法。

第一种是改用 ConstructorProvider。

providers: [{ provide: VALUE_TOKEN, useValue: 'value 123' }, ServiceB satisfies TypeProvider]

把 TypeProvider 改成 ConstructorProvider

providers: [
  { provide: VALUE_TOKEN, useValue: 'value 123' }, 
  { provide: ServiceB, deps: [VALUE_TOKEN] } satisfies ConstructorProvider
]

ConstructorProvider 可以精准声明依赖。甚至不需要 @Injectable() decorator。但这种把逻辑分两个地方的写法严重破坏代码管理，所以不推荐这种写法。

第二种方法是使用 @Inject() decorator。

@Injectable()
class ServiceB {
  constructor(@Inject(VALUE_TOKEN) value: string) {}
}

同时表达了 key 和类型。

compile 后长这样

用 @Inject 注入 class

@Injectable()
class ServiceB {
  constructor(@Inject(ServiceA) value: ServiceA) {}
}

@Inject 可以注入所有的 provider，当然也包括 class provider。

上面这段代码和我们单写 class 依赖

constructor(serviceA: ServiceA) {}

compile 出来是一摸一样的，你可以认为单写 class 只是一个便捷的写法而已，其原理还是 @Inject(key)。

inject

这段代码

@Injectable()
class ServiceB {
  constructor(serviceA: ServiceA) {}
}

会被 compile 成

ɵfac 其实没有很特别，它只是做了 new ServiceB( inject(ServiceA) ) 而已。

最关键的是 ɵɵinject 这个函数。

按这个思路走。。。假若我们也可以使用这个 inject 函数。那代码是否可以改成

class ServiceB {
  constructor() {
    const serviceA = ɵɵinject(ServiceA);
  }
}

我们推测看看

function inject() {}
function constructor(depend: any) {}

有一个全局的 inject 函数，和一个 constructor 函数 with 一个依赖参数。

const depend = inject();
constructor(depend);

通过 inject 获取到 depend，然后调用 constructor 传入 depend

对比

function constructor() {
  const depend = inject();
}
constructor();

直接在 constructor 内调用 inject 获得 depend。

这 2 种写法在语法上都是成立的。

所以，Angular 确实允许我们使用这个 inject 函数，也可以像上面那样子去注入依赖，甚至这是 v14 版本后的 best practice。

完整的例子：

const VALUE_TOKEN = new InjectionToken<string>('Value');

class ServiceA {
  constructor() {
    const value = inject(VALUE_TOKEN); // 'Derrick'
  }
}

const injector = Injector.create({
  providers: [{ provide: VALUE_TOKEN, useValue: 'Derrick' }, ServiceA],
});

const serviceA = injector.get(ServiceA);

注1：

我甚至省略了 @Injectable() decorator。因为这个写法就相等于，我们自己写了 ɵfac 方法，

所以就不在需要 compiler 通过反射 constructor 参数写出 ɵɵinject 了。

注2：

我们使用的是 inject 函数，而不是 ɵɵinject 函数。但凡 starts with ɵ 这个 symbol 的东西都是 Angular 框架 internal 用的，开发者不要去用哦，那都是不稳定的。

而 inject 则是 Angular 公开给我们使用的，其实它内部也是调用了 ɵɵinject 函数哦。

injection context & runInInjectionContext

下面这段代码报错了。

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

class ServiceA {}
class ServiceB {
  constructor() {
    console.log(inject(ServiceA));
  }
}

const serviceB = new ServiceB(); // Error: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`

为什么会报错？为什么 Error 会说 inject() 只能用在一些特定的地方？

我们知道 DI 概念核心是 Injector 和 Provider，上面的代码里，我们没有任何 Injector，所以 inject 自然就不成立。

inject 是一个全局方法，它并没有什么黑魔法，它之所以可以实现依赖注入，依靠的是作用域内（aka injection context）的 Injector。

上面 new ServiceB() 并不会产生任何 injection context，所以 inject 自然就失效了。

来看一个成功的例子

class ServiceA {}
class ServiceB {
  constructor() {
    console.log(inject(ServiceA));
  }
}
const injector = Injector.create({
  providers: [ServiceA, ServiceB],
});

const serviceB = injector.get(ServiceB);

injector.get 会产生 injection context，也就是说会有一个全局变量 injector，所以全局函数 inject 可以使用这个 injector 去找到 ServiceA。

除了上面这种方式，还有一个方式可以创建出 injection context。

runInInjectionContext(injector, () => {
  const serviceA = inject(ServiceA);
  const serviceB = inject(ServiceB);
});

总之

1. inject 只可以在 injection context 内使用。

2. 要创造出 injection context 你要先创建一个 injector。

3. 总结就是：要用 inject 就得先要有 injector。

@Inject()、Provider.deps、inject 傻傻分不清楚

由于众多历史原因，导致了 Angular 有多种方式可以实现同一个功能，这对开发来说是非常不友好的，但幸好 Angular 总是有 best practice。

只要我们乖乖 follow best practice，哪怕傻傻分不清楚也能顺风顺水的开发项目。

不过呢，要搞清楚它们也不是件很困难的事，这里我就来讲讲 @Inject()、inject()、Provider.deps 傻傻分不清楚的地方呗。

@Inject()

@inject 主要的使用场景是在 class constructor 注入 token。

const VALUE_TOKEN = new InjectionToken<string>('Value');

@Injectable()
class ServiceA {
  constructor(@Inject(VALUE_TOKEN) value: string) {}
}

const injector = Injector.create({
  providers: [ServiceA, { provide: VALUE_TOKEN, useValue: 'Hello World' }],
});

const serviceA = injector.get(ServiceA);

注: 要搭配 @Injectable decorator 哦。

inject 函数可以完全取代 @Inject decorator，上面代码可以改成这样

class ServiceA {
  constructor() {
    const value = inject(VALUE_TOKEN);
  }
}

Provider.deps

除了 @Inject，还有一种注入方式是通过 Provider.deps

const VALUE_1_TOKEN = new InjectionToken<string>('Value1');
const VALUE_2_TOKEN = new InjectionToken<string>('Value2');

const injector = Injector.create({
  providers: [
    { provide: VALUE_1_TOKEN, useValue: 'value 1' },
    {
      provide: VALUE_2_TOKEN,
      useFactory: (value1: string) => `${value1} and value2`,
      deps: [VALUE_1_TOKEN],
    },
  ],
});

const value2 = injector.get(VALUE_2_TOKEN);

这个同样可以被 inject 函数替代。

providers: [
  { provide: VALUE_1_TOKEN, useValue: 'value 1' },
  {
    provide: VALUE_2_TOKEN,
    useFactory: (value1: string) => `${inject(VALUE_1_TOKEN)} and value2`,
  },
],

inject 函数

显然，inject 函数就是用来替代 @Inject 和 Provider.deps 的，所以尽量用 inject 少用 @Inject 和 Provider.deps。

Multiple Provider

当出现相同 Provider 时（provide === provide 代表是相同的 Provider），第二个会覆盖第一个

const VALUE_TOKEN = new InjectionToken<string>('Value');
const injector = Injector.create({
  providers: [
    { provide: VALUE_TOKEN, useValue: 'first value' },
    { provide: VALUE_TOKEN, useValue: 'second value' },
  ],
});
const value = injector.get(VALUE_TOKEN); // second value

injector.get 获取到的是 second value。

我们可以通过设置 multi: true 来声明不要 override，取而代之的是把所有的 value 放入 array 返回。

{ provide: VALUE_TOKEN, useValue: 'first value', multi: true }, // 添加 multi: true
{ provide: VALUE_TOKEN, useValue: 'second value', multi: true }, // 添加 multi: true

最终会得到所有 values 的 array

const value = injector.get(VALUE_TOKEN); // ['first value', 'second value']

Injection Optional and Default Value

class ServiceA {}
const injector = Injector.create({
  providers: [],
});
const serviceA = injector.get(ServiceA); // Error: No provider for ServiceA

没有 Provider，inject 时就会报错。如果我们不想它报错，想自己处理的话，可以使用 default value。

const serviceA = injector.get(ServiceA, null); // null

get 的第二参数是当找不到 Provider 时，提供一个 default value，这样也就不会报错了。

inject 函数的写法

class ServiceB {
  constructor() {
    const serviceA = inject(ServiceA, { optional: true }); // null
  }
}

注: 它的值是 null 而不是 undefined 哦，Angular 许多地方都是用 null 多余 undefined 的。

@inject 的写法

@Injectable()
class ServiceB {
  constructor(@Inject(ServiceA) @Optional() serviceA: ServiceA | null) {
    console.log(serviceA);
  }
}

用到了 @Optional decorator，decorator 的写法已经逐渐被淘汰了，建议统一用 inject 函数就好了，下面的教程我也不会再提了。

Provider.deps 的写法

const injector = Injector.create({
  providers: [
    {
      provide: ServiceB,
      useFactory: (serviceA: ServiceA | null) => {
        return new ServiceB(serviceA);
      },
      deps: [[new Optional(), ServiceA]], // 关键
    },
  ],
});

这个写法比较冷门，而且 deps 的类型是 any[]，没有翻文档很难想到它是这么写的。另外 Optional 和 @Optional 是同一个 Optional 哦。

Provider.deps 的写法也已经逐渐被淘汰了，建议统一用 inject 函数就好了，下面的教程我也不会再提了。

循环引用

Angular DI 不支持循环引用。

class ServiceA {
  serviceB = inject(ServiceB); // Error: Circular dependency in DI

  // 上面的写法相等于下面 constructor 写法，这个是基本 JS 语言
  // constructor(){
  //   serviceB = inject(ServiceB);
  // }
}

class ServiceB {
  serviceA = inject(ServiceA);
}

const injector = Injector.create({
  providers: [ServiceA, ServiceB],
});
const serviceB = injector.get(ServiceB);

直接报错 circular dependency。

破解之法

有些循环引用是设计问题，我们应该要修改设计，但绝大部分情况是因为依赖注入的局限。

依赖注入要求通过 constructor 作为注入入口，但很多时候我们并不需要在 constructor 阶段使用到依赖，更多的是在某些方法中才使用到依赖。

这种情况下循环依赖在设计上，其实并没有问题。

我们可以通过先注入 Injector 的方式来破解。

class ServiceA {
  injector = inject(Injector);
  method() {
    const serviceB = injector.get(ServiceB);
  }
}

ServerA 不在 constructor 阶段注入 ServiceB，就不会有循环依赖了，

取而代之的是注入当前的 Injector，在 method 被调用时才去注入 ServiceB。

注：下面这个下方是错误的

class ServiceA {
  method() {
    const serviceB = inject(ServiceB);
  }
}

因为 inject 没有在 injection context 中，只有 constructor 阶段才在 injection context 哦。

我们可以通过 runInInjectionContext 来处理。

class ServiceA {
  injector = inject(Injector);
  method() {
    runInInjectionContext(this.injector, () => {
      const serviceB = inject(ServiceB);
    });
  }
}

这样就 ok 了。

Singleton 单列模式

Injector.get 创建 value 后会把 value 缓存起来，用在 class 的话，这叫单列模式。

class ServiceA {}

const injector = Injector.create({
  providers: [ServiceA],
});
const serviceA1 = injector.get(ServiceA);
const serviceA2 = injector.get(ServiceA);
console.log(serviceA1 === serviceA2); // true

下面 useFactory 方法只会被调用一次

const injector = Injector.create({
  providers: [{ provide: ServiceA, useFactory: () => new ServiceA() }],
});
const serviceA1 = injector.get(ServiceA);
const serviceA1 = injector.get(ServiceA);

这个是 Angular DI 的设计，如果我们不想要单列，希望每一次都跑 factory 方法....不太容易，下一 part 会教。

Hierarchical Injector

Angular 的 Injector 有 Prototype 的概念（parent child 原型链）

class ParentService {}
class ChildService {}

const parentInjector = Injector.create({
  name: 'Parent Injector',
  providers: [ParentService],
});

const childInjector = Injector.create({
  name: 'Child Injector',
  parent: parentInjector, // 连接上 parent
  providers: [ChildService],
});

在 Injecter.create 时声明它的 parent 就可以把 injector 串联起来了。

继承的作用自然是原型链查找咯。

const parentService = childInjector.get(ParentService);

通过 childInjector 也可以获取到 ParentService。这就是它的基本玩法。

当 Hierarchical 遇上 Override Provider 和单列模式

上面有提过 Injector 两个特性

1. Injector 只会实例化一次 class。后续的注入会返回同一个实例。(所谓的单列模式)

2. 当出现 same Provider 时，后一个会覆盖掉前一个 (除非声明 multi: true)

而这两个特性遇上继承时会有一些些变化，看例子：

each Injector have own scope

class ParentService {}

const parentInjector = Injector.create({
  name: 'Parent Injector',
  providers: [ParentService],
});

const childInjector = Injector.create({
  name: 'Child Injector',
  parent: parentInjector,
  providers: [ParentService], // override ParentService
});

const parentService1 = parentInjector.get(ParentService);
const parentService2 = childInjector.get(ParentService);
console.log(parentService1 === parentService2); // false

每一个 Injector 都有自己的 scope。它和原型链的查找非常相似。当 childInjector 拥有属于自己的 Provider 时。它就不会去查找 ParentInjector 了。 

childInjector.get(ParentService) 会产生一个新的 ParentService 实例。这也是我们避开 Singleton 的唯一方法哦。

此外, 当声明 multi: true，也不会出现 double service

class ParentService {}

const parentInjector = Injector.create({
  name: 'Root',
  providers: [{ provide: ParentService, multi: true }],
});

const childInjector = Injector.create({
  name: 'Child',
  parent: parentInjector,
  providers: [{ provide: ParentService, multi: true }],
});

const parentService2 = childInjector.get(ParentService);
console.log(parentService2); // [ParentService]

同样是因为当 childInjector 有属于自己的 Provider 时，它就完全不理会 ParentInjector 了。

self, skipSelf 限制查找

class ParentService {}
class ChildService {}

const parentInjector = Injector.create({
  name: 'Parent Injector',
  providers: [ParentService],
});

const childInjector = Injector.create({
  name: 'Child Injector',
  parent: parentInjector,
  providers: [ChildService],
});

const parentService1 = childInjector.get(ParentService); // ok
const parentService2 = childInjector.get(ParentService, undefined, {
  self: true,
}); // 报错

由于声明了 self: true，childInjector 只能在自己的作用域查找 Provider，所以无法获取到 ParentService 也就报错了。

同理 skipSelf 就是不找自己的作用域，只找祖先的 Injector。

const childService = childInjector.get(ChildService, undefined, {
  skipSelf: true,
}); // 报错

@Injectable() and InjectionToken as Provider

特别声明：

下面例子中会用到 providedIn: 'any'，这个东西已经在 Angular v15 废弃了，不过目前 v17 依然能用。

相关资讯: Docs – Deprecated APIs and features

本篇为了不涉及其它概念又想体现 "@Injectable() and InjectionToken as Provider“，所以才用了这个 providedIn: 'any'。

虽然 providedIn: 'any' 是废弃了，但是 providedIn 没有废弃，比如 providedIn: 'root' | 'platform' 都还在。

所以你依然可以照着它的概念去理解。

上面所有例子中，我们提供 providers 给 Injector 的方式，对代码管理和 tree shaking 是扣分的。

// service-a.ts
class ServiceA {}

// service-b.ts
class ServiceB {}

// injector.ts
import { ServiceA } from './service-a.ts';
import { ServiceB } from './service-b.ts';

export const injector = Injector.create({
  providers: [ServiceA, ServiceB],
});

// app.ts
import { injector } from './injector.ts';
import { ServiceB } from './service-b.ts';

injector.get(ServiceB);

第一，我们必须把所有可能会用到的 Provider 通通 pass 给 Injector，这个很麻烦丫，不小心漏掉一个怎么办，代码管理扣分。

第二，我在 app.ts 只用到了 ServiceB，而且 ServiceB 本身并不依赖 ServiceA，所以整个项目 ServiceA 是应该被 shaking 掉了，

但由于 injector.ts 需要 import 所有可能被用到的 Provider，导致无论如何 ServiceA 都不会被 shaking 掉。tree shaking 扣分。

为了解决上述的问题，Angular 搞了另一种提供 Provider 给 Injector 的方式。

@Injectable() as Provider

下面这样会报错

class ServiceA {}

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

console.log(injector.get(ServiceA)); // Error: No provider for ServiceA!

因为 providers 是空的。

我们加上 @Injectable

@Injectable({
  providedIn: 'any',
})
class ServiceA {}

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

console.log(injector.get(ServiceA)); // OK

这样就不会报错了。

上面我们有提到过，@Injectable 除了可以配合 Angular Compilation 搞黑魔法，它的另一个主要作用便是 as Provider。

为什么 providedIn: 'any' 后，injector 不需要 providers 也可以 get 到 ServiceA 呢？

特别声明：

providedIn: 'any' 已经在 Angular v15 废弃了，不过目前 v17 依然能用。

相关资讯: Docs – Deprecated APIs and features

本篇为了不涉及其它概念又想体现 "@Injectable() and InjectionToken as Provider“，所以才用了这个 providedIn: 'any' 作为例子。

虽然 providedIn: 'any' 是废弃了，但是 providedIn 没有废弃，它还可以 providedIn 其它的，比如 providedIn: 'root' 或者 providedIn: 'platform'。

所以你依然可以照着它的概念去理解。

Injector 源码逛一逛

Injector.create 方法的源码在 injector.ts。

看注释理解哦。

createInjector 函数源码在 create_injector.ts

createInjectorWithoutInjectorInstances 函数

关键就是创建除了 R3Injector 对象。

class R3Injector 的源码在 r3_injector.ts

R3Injector  继承自 EnvironmentInjector

EnvironmentInjector 又实现了抽象的 Injector 接口，我们平时用的就是 Injector 接口。

R3Injector 内有 2 个很重要的属性

一个是 records，它是一个 Map 用来装所有的 providers。

另一个是 parent injector。

有了这 2 个属性，Injector.get 就可以查找 providers 和祖先 providers 了。

那如果 records 里找不到 Provider 呢？

这个 injectable definition 指的是，经过 compile + @Injectable() 后 ServiceA 的 ɵprov static property。

当 records 找不到，Injector 去拿 ServiceA.ɵprov injectable definition。

然后检查它的 scope

providedIn: 'any' 表示 in scope（注: 除了 any 其实还可以放其它值，比如 'root' 和 'platform'，这个以后章节会教）

接着调 factory 出来执行就拿到 provider value 了。

总结，injector 有 2 种方式可以找到 provider，第一个是去 records 找 provider，另一个是去 definition 找 provider。

InjectionToken as Provider

@Injectable({
  providedIn: 'any',
})
class ServiceA {
  value = 'Hello World';
}

const VALUE_TOKEN = new InjectionToken('Value', {
  providedIn: 'any',
  factory() {
    const serviceA = inject(ServiceA); // 注入其它依赖
    return serviceA.value;
  },
});

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

console.log(injector.get(VALUE_TOKEN)); // 'Hello World'

和 @Injectable 同样原理，只是 @Injectable 用于 class，InjectionToken 用于其它类型。

真实项目中 DI 的使用方式 

上面例子中，我们都是自己创建 Injector，但其实，在真实项目中，Angular 会替我们创建 Injector，我们不会用到 Injector.create 这个方法。

首先创建一个项目

ng new di --routing=false --style=scss --skip-tests --ssr=false

做一个 service-a.ts

export class ServiceA {}

在 Angular 项目中，我们的代码入口是组件，而组件本身又是 class，所以它天生就可以注入。

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ServiceA } from '../service-a';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  constructor() {
    const serviceA = inject(ServiceA); // No provder for ServiceA
    console.log(serviceA);
  }
}

我们直接在 AppComponent constructor 里通过 inject 函数注入 ServiceA。

结果报错了。因为呢，虽然 Angular 替我们创建了 Injector，但是 DI 还需要 Provider，我们还没有把 ServiceA 提供给 Injector，所以它找不到。

到 app.config.ts

import { ApplicationConfig } from '@angular/core';
import { ServiceA } from '../service-a';

export const appConfig: ApplicationConfig = {
  providers: [ServiceA],
};

appConfig.providers 就是提供给 Injector 的 providers。

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

Angular 在 bootstrap application 的时候会把 AppComponent 和 appConfig 串联上。

于是 AppComponent 就可以 inject 到 appConfig 的 providers 了。

当然我们也可以用 @Injectable providedIn 的方式提供 Provider 给 Injector。

@Injectable({
  providedIn: 'any',
})
export class ServiceA {}

总结

Angular 的 DI 和其它后端 (e.g. ASP.NET Core) 的 DI 大同小异，几个小小区别：

1. not only class，任何类型都可以使用 DI。

2. 单列模式

3. 原型链

目前为止，我们大概学习了 50% 关于 Angular DI 的知识，另外 50% 会在后面的章节教。

为什么不一起教？因为太复杂。当 DI 配上组件会有另一番天地，我们必须先对组件有基础的了解才能把 DI 加进去。

目录

上一篇 Angular 17+ 高级教程 – Angular Compiler (AKA ngc) Quick View

下一篇 Angular 17+ 高级教程 – Component 组件 の Angular Component vs Web Component

想查看目录，请移步 Angular 17+ 高级教程 – 目录

当 Injection Context Injector == null 遇上 provided: 'root' 尽然可以跑？！

逛源码无意间发现的奇葩情况。

injector_compatibility.ts

当我们调用 inject 时，它会调用 internal ɵɵinject 函数。

然后调用 injectInjectorOnly 函数

有 2 种情况

1. 当 _currentInjector（也就是 injection context 的 Injector） 非 null 时，那就调用 Injector.get 获取依赖值，这个是正常情况。

2. 当 _currentInjector 是 null 时，它会跑 injectRootLimpMode 函数。

inject_switch.ts

injectRootLimpMode 内会调用 @Injection() 或 InjectionToken 的 injectable definition 的 factory 去生成依赖值。

有趣的是，只有 providedIn === 'root' 才会，'any' 和 ‘platform’ 都不会哦。 

来一个 playgroud 体会一下呗

 把 providedIn 升级去 'any' 或 'platform'

结果报错了。虽然不懂为什么，但我这样操作显然是不合理的，怎么可以把 Injection Context Injector 设置成 null 呢。

所以我估计这个是 Angular 内部自己玩的东西，或许以后就会被修改了。