Angular 5 Injector：如何注入字符串（解决get方法弃用警告）

我太懂这种纠结了——之前直接用Injector.get('xxx')注入字符串确实省事，但Angular从v4开始就弃用了这种基于字符串标识的注入方式，转而推荐用InjectionToken。而且你担心的useValue其实完全适配动态组件加载的需求，并不是要你写死值，而是可以动态传递实际值，下面给你一步步说怎么弄：

步骤1：定义专属的InjectionToken #

首先你需要创建一个InjectionToken来替代原来的字符串标识，这样Angular能准确识别这个依赖：

// 可以放在单独的token文件里，或者组件所在文件中
import { InjectionToken } from '@angular/core';

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

这里的泛型<string>指定了这个token对应的值类型，后面的字符串是可选的描述，方便调试用。

步骤2：动态创建组件时注入实际值 #

在动态加载组件的地方，你需要创建一个临时的子注入器，把你要传递的实际字符串值绑定到上面定义的token上。这样每次创建组件都可以传入不同的字符串，完美适配动态场景：

import { ComponentFactoryResolver, Injector, ComponentRef } from '@angular/core';
import { DYNAMIC_STRING_TOKEN } from './your-token-path';

// 假设你已经获取到了目标组件的factory
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourDynamicComponent);

// 创建带动态值的注入器
const dynamicInjector = Injector.create({
  providers: [
    // 这里的useValue就是你要注入的实际字符串值，完全可以动态生成
    { provide: DYNAMIC_STRING_TOKEN, useValue: '这是动态传递的实际字符串' }
  ],
  parent: this.injector // 继承父注入器的其他依赖，避免丢失原有服务
});

// 用这个动态注入器创建组件
const componentRef: ComponentRef<YourDynamicComponent> = componentFactory.create(dynamicInjector);

步骤3：在目标组件中接收注入值 #

最后在你要注入字符串的动态组件里，通过@Inject()装饰器来获取这个token对应的值：

import { Component, Inject } from '@angular/core';
import { DYNAMIC_STRING_TOKEN } from './your-token-path';

@Component({
  selector: 'app-dynamic',
  template: `<p>{{ injectedString }}</p>`
})
export class YourDynamicComponent {
  constructor(
    // 用token来注入，替代原来的字符串
    @Inject(DYNAMIC_STRING_TOKEN) public injectedString: string
  ) {}
}

为什么这能解决你的问题？ #

• 完全避开了弃用的Injector.get(string)方式，符合Angular的最新规范
• 这里的useValue并不是要你写死值，而是用来动态传递你需要的实际字符串，每次创建组件时都可以传入不同的值，完美适配动态组件加载的场景
• InjectionToken还能避免字符串标识的命名冲突问题，比原来的方式更可靠

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