Angular 2 模态服务插入动态（未知）组件

Question

我正在尝试将组件动态插入自定义模式 window 组件

我的模态组件收到一个 URL 到一个 html 文件，里面有一个组件：

<a modal bodyUrl="/some/path/body.html">

body.html:

  <hello-component></hello-component>

我正在通过 http 将 body.html 的内容加载到模式的 DOM 中，并通过 htmlBinding 属性将其插入到模板中。

但是，我的组件不会呈现。有没有办法强制重新渲染？或者类似的东西？

感谢您的帮助！

更新 1：

下面的两个答案给了我一个想法，将组件类型作为模态的输入传递，并使用 DynamicComponentLoader 到 bootstrap 组件

这里有一些概念：

http://plnkr.co/edit/kbD8wVgTr0b0J4rvk4uY?p=preview

Answer 1

您需要使用 DynamicComponentLoader 而不是 innerHTML 属性。在这种情况下，组件将被编译并添加到模板中。

这是一个示例：

@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}

有关详细信息，请参阅此 link：

https://angular.io/guide/dynamic-component-loader

Angular 2 模态服务插入动态（未知）组件

Angular 2 Modal Service insert dynamic (unknown) component

render

angular