angular 2 Dynamic Component Loader & ngStyle 不能一起工作？

Question

我正在使用 Angular 2 的动态组件加载器的确切实现，如下所述：https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html（特别是 loadAsRoot 实现）。

它工作正常。但是，现在我想通过以下方式扩展它：父级具有一定的宽度 x 高度，我将其传递给服务。然后，在孩子中订阅服务，并使用 ngStyle 渲染子维度。

这在整个应用程序中都可以正常工作，除非我使用动态组件加载器！这不是服务的问题，它会在组件实例化时正确地向控制台触发宽度和高度。但是我在 ngStyle 中输入的任何内容都不会被渲染。

我做错了什么，我有哪些选择可以解决这个问题？

谢谢。

编辑：

示例代码：

@Component({
  selector: 'child-component',
  template: '<div [ngStyle]="{'background-color':'red'}">Child</div>'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

ngStyle 的调用没有效果。

Answer 1

dcl.loadAsRoot() 不会为添加的组件配置更改检测，但ngStyle 取决于启用的更改检测。

解决方法在https://github.com/angular/angular/issues/6223#issuecomment-195155190中进行了说明

this.appRef._loadComponent(cmpRef);

使用私有_loadComponent()。

DynamicComponentLoader 无论如何都将被弃用，取而代之的是ViewContainerRef.createComponent()。

有关ViewContainerRef.createComponent() 的示例，请参阅Angular 2 dynamic tabs with user-click chosen components