Angular 2：在innerHTML中加载动态组件

我有2个@组件，比如说和。现在，我必须在say中动态加载innerHTML，例如，如下所示

组件1.html

<div [innerHTML]="domEl | safeHtml"></div>

在Angular2组件1类中

import {
  Component,
  OnInit,
  ViewEncapsulation
} from '@angular/core';


@Component({  
  selector: 'component-1',

  templateUrl: './component-1.html',

  encapsulation: ViewEncapsulation.None
})
export class Component1 implements OnInit {    

  public ngOnInit() {
    this.domEl = '<component-2 data="1234"></component-2>'
  }
}

导入{
组成部分，
奥尼特，
视图封装
}从“@angular/core”开始；
@组件（{
选择器：“组件-1”，
templateUrl:“./component-1.html”，
封装：视图封装。无
})
导出类组件1实现OnInit{
公共ngOnInit（）{
this.domEl=''
}
}

组件2已通过声明[]注入到app.module.ts文件中。另外，safeHtml是用于安全HTML转换的管道

即使如此，问题是组件2没有加载。有人能建议我如何解决这个问题吗

注:

• 如果我直接在component-1.html中包含component-2，它就会工作。但我们有一个无法动态注入组件2的情况
• 堆栈构建在Angular2、TypeScript和Webpack上

---

Angular不处理传递给

[innerHTML]=“…”

的HTML，但出于安全目的进行的清理除外。绑定、组件、指令。。。不会创建，因为如上所述，Angular会忽略内容。您可以做的是在运行时创建一个组件，如中所述。AFAIR有人构建了一个模块，使这变得更容易，但我不记得详细信息。

不要加载innerHtml，而是使用带有ngIf或ngSwitch的模板。不能这样做，在我的情况下，这将不起作用。您不能将组件作为html注入。组件从阴影Dom渲染到真实Dom。当您使用innerHTML注入内容时，它应该是原始Html，而不是需要渲染管道的内容。正如我之前所说，您必须使用ngIf或ngSwitch