Angular2：动态组件加载器和注入答案

【问题标题】：Angular2: Dynamic Component Loader and injectionAngular2：动态组件加载器和注入
【发布时间】：2016-01-26 05:36:51
【问题描述】：

我一直在尝试使用 Angular2 中的动态组件加载器。可能与此相关的一个问题：https://github.com/angular/angular/issues/4330 似乎是，一旦使用 loadIntoLocation() 函数加载组件，注入器就无法找到父组件的注入器或注入其中的东西。正如那篇文章所建议的，您可以将从父级注入器 (Injector.resolve) 获得的已解析提供程序数组传递给 loadIntoLocation() 的最后一个参数。

这似乎最初可以工作，但我也发现动态加载的组件的任何子也有同样的问题。子节点的注入器不知道要查找提供者的注入树，因此子节点的构造函数中的标准注入就像

   constructor( myComponent: MyComponent)

不起作用。子（动态加载的组件）不是动态加载的，而只是“通常”使用模板、选择器等实例化。我想知道：

这（仍然）是一个已知问题还是我误解了什么？
如果是已知问题，是否有任何子级解决方法？我尝试了上面的构造函数，还使用了@Host，还使用了forward ref + @host，但没有任何效果。是否有其他方法可以手动将绑定传递给未动态加载的组件？
还有其他可能的解决方法吗？

【问题讨论】：

标签： dependency-injection angular

【解决方案1】：

问题似乎是由传递给loadToLocation() 的已解决提供程序引起的。 DI 是分层的，DI 尝试通过将层次结构移向根来解析所需的类型，但链在loadToLocation() 处中断，因为传递的是提供者而不是子注入器。
动态添加的组件及其子组件只能解析传递给loadToLocation() 或在动态添加组件本身的providers 列表中列出的提供程序（或者如果它是实际解析组件的（祖）父级，则它的子级之一） )。

当 DI 从动态插入的树中向上遍历以解决依赖关系时，迭代将在 loadToLocation() 添加的组件处停止，因为该组件的注入器没有父注入器（这将是添加动态添加组件的宿主组件）。

另见https://github.com/angular/angular/issues/5990

【讨论】：

感谢该链接 - 似乎还有更多想法可以尝试。为了清楚起见，根据我的经验，动态加载不仅会导致 Injector 树被破坏，而且动态加载组件的所有后续子组件也不能沿着它们的树向上走（这与您所说的有点不同）。每个孩子似乎都被放置在自己的注射器树中。因此，列出的解决方法需要以某种方式重复每个孩子，这是站不住脚的。很高兴被证明是错误的......我会看看你的链接，看看我是否可以让它工作。非常感谢。
我没有详细调查。如果如您所说，那么我认为这是一个错误，应该报告。不过，动态添加的元素的树被破坏是显而易见的，我想这将得到修复。

【解决方案2】：

对此进行更正。我将代码中的另一个问题与我认为的上述错误混为一谈。我的动态加载组件的子组件派生自抽象类。我试图将抽象类注入到孩子中，而不是实际的实现，根据这个

Interface based programming with TypeScript, Angular 2 & SystemJS

我知道你做不到。注入树在动态负载时确实会被破坏（我认为应该纠正），但我收回了关于孩子此后无法遍历自己的树的部分。感谢 cmets - 它帮助我解决了问题。

【讨论】：