如何使用Angular2将服务注入动态组件

Question

我有一个使用DynamicComponentLoader动态加载另一个组件的组件。但是，动态组件需要注入服务。但是，我不确定如何解决这个问题。我从Angular.io文档中看到DynamicComponentLoader接受ResolvedProvider数组。

我试图通过以下方式获得提供商：

~/.bash_rc

这似乎不起作用。您可以看到example on plunker。

在plunker示例中，您可以看到Info组件加载（因为它不需要服务）但Alternate组件不会加载。

我有点困惑，因为服务是在根组件注入的，所以我认为它会在被调用时自动注入每个子组件。

如何注入此服务？

Answer 1

它与正常DI不应该有任何不同

this.dynamicComponentLoader.loadIntoLocation(MyComponent, this.elementRef, "content")


class MyComponent{
  constructor(someService:SomeService){}//injected here when instantiated
}

如果动态加载的组件在构造函数中注入服务，它就像普通的DI一样工作。

确保服务已在某些提供程序数组中注册。在链中的组件级别或更高级别（父级或引导程序）