Angular 5 Injector - 如何注入(inject)字符串

Question

我正在尝试将字符串注入(inject)我的 Angular 组件。下面的代码工作正常，但它给出了弃用警告:get 已弃用:从 v4.0.0 开始使用 Type 或 InjectionToken

@Component({
  selector: 'app-label',
  templateUrl: './label.component.html',
  styleUrls: ['./label.component.scss']
})
export class LabelComponent {
  public name: string;
  public caption: string;
  constructor(
    private injector: Injector
  ) {
    this.name = this.injector.get('name');
    this.caption = this.injector.get('caption');
  }
}

所以我尝试使用这个非常简短且不完整的文档 Angular 5 Injector 想出类似下面的东西，但是我不想 useValue 或 useClass，我需要的是注入(inject)的实际值。

    class BS { }
    // [..]
    const name = new InjectionToken<string>('name');
    const caption = new InjectionToken<string>('caption');
    const injector = ReflectiveInjector.resolveAndCreate([
      { provide: name, useClass: BS},
      { provide: caption, useClass: BS}
    ]);
    this.name = this.injector.get(name);
    this.caption = this.injector.get(caption);
    console.log(this.name); // will be an instance of BS

我真的被困在这里，文档根本没有帮助。

我需要这个用于动态组件加载和注入(inject)。完整的 Plunker 可以在以下位置找到:Plunker Dynamic Component Loading and Injection

Answer 1

首先你需要创建一个InjectionToken (在 values.ts 中):

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

export const PAGE_TITLE = new InjectionToken<string>('page.title');

然后您需要将其导入您的模块并在请求该 token 时提供一个值:

providers: [ HeroService, MessageService,
    { provide: PAGE_TITLE, useValue: "My Wonderful Title" }
],

然后您需要在要注入(inject)值的地方导入该 token 并使用@Inject():

constructor(@Inject(PAGE_TITLE) title) {
  this.title = title;
}

Sample on Stackblitz

查看ReflectiveInjector它说它很慢并使用Injector.create相反，顺便说一句......