为动态创建的外部 + AOT 编译组件提供自定义注入器

Question

我们正在开发一个小部件风格的系统，其中使用 Angular 8(无常春藤(，我们希望提供通过 SystemJS 加载然后渲染的 AOT 编译组件。为此，我们基本上遵循了亚历克斯祖扎的方法。构建、捆绑、导入和渲染组件工作正常。

但是，我现在想为正在创建的组件提供一个自定义注入器。在我看来，这应该像

const injector = Injector.create({
parent: this.injector,
providers: [
{ provide: MY_TOKEN, useValue: 42 },
],
});
const compRef = this.container.createComponent(compFactory, 0, injector);
// Both of these work
console.log(injector.get(MY_TOKEN)); // 42
console.log(compRef.injector.get(MY_TOKEN)); // 42

但是，如果我们更改插件以注入此令牌：

constructor(@Inject(MY_TOKEN) private value: number) {}

。我们只是收到一个错误，因为找不到令牌：

错误

空注射器错误： 静态注入器错误(...([o -> InjectionToken MY_TOKEN]

---

AOT 编译的组件是否有某些特定的东西阻止了它的工作？检查捆绑包时，一切看起来都符合我的预期，并且注入令牌中不存在名称损坏或类似内容的问题。

如何正确地为来自外部资源的组件提供自定义注入器？

Answer 1

在 Angular 中为提供程序使用令牌时的主要警告是，我们在提供程序中声明并在类中注入的令牌必须从同一物理位置导入。一个例外是字符串标记。

这意味着，如果您在一个 js 文件中具有const MY_TOKEN = new InjectionToken('MY TOKEN');并在另一个文件中具有相同的定义，那么如果提供和注入不同的令牌，您可能会遇到此问题。

因此，您的解决方案是使用字符串作为令牌或使用在捆绑包之间共享的令牌。