如何在Angular中定义可选的InjectionToken？

有两种常用方式可以让你的MY_TOKEN成为可选注入令牌，避免未提供时的报错：

方法一：使用@Optional()装饰器 #

在注入MY_TOKEN时加上@Optional()装饰器，当没有任何提供者提供该令牌时，Angular会注入null而非抛出错误。注意要在代码里处理空值情况：

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

export const MY_TOKEN = new InjectionToken<string[]>('MY_TOKEN');

@Injectable({ providedIn: 'root' })
export class DemoService {
  constructor(
    @Optional() @Inject(MY_TOKEN) public myTokenData: string[] | null,
  ) {
    // 兜底处理空值，比如设为默认空数组
    this.myTokenData = myTokenData ?? [];
  }
}

方法二：给InjectionToken设置默认值 #

创建InjectionToken时直接指定默认值，这样即使没有应用显式提供该令牌，Angular会自动使用你定义的默认值，无需额外处理空值：

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

// 创建令牌时设置默认空数组
export const MY_TOKEN = new InjectionToken<string[]>('MY_TOKEN', {
  providedIn: 'root',
  factory: () => []
});

@Injectable({ providedIn: 'root' })
export class DemoService {
  constructor(
    @Inject(MY_TOKEN) public myTokenData: string[],
  ) {}
}

两种方式的区别 #

• @Optional()更灵活，允许你在不同场景下决定是否提供令牌，但需要自行处理空值逻辑。
• 给令牌设置默认值更省心，适合有明确默认行为的场景，无需额外判断空值。

内容的提问来源于stack exchange，提问作者Domske