角度2:加载innerHTML中的动态部件

Question

我有两个@组件，比如说和。现在，我必须像innerHTML那样动态加载，例如，如下所示

component-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>'
  }
}

组件-2已经通过declarations[]注入到declarations[]文件中。safeHtml也是用于安全的HTML转换的管道。

即使这样，问题是组件-2没有加载。有人能建议我怎么解决这个问题吗？

注意：

• 如果我直接将组件-2包含在组件-1.html中，它就会工作。但是有一种情况，我们不能动态地注入组件-2。
• 堆栈是在Angular2、TypeScript和Webpack的基础上构建的。

Answer 1

除了出于安全目的的净化之外，Angular不处理传递给[innerHTML]="..."的HTML。绑定组件指令..。没有创建，因为如前所述，角忽略了内容。您可以做的是在运行时创建一个组件，就像在Equivalent of $compile in Angular 2中解释的那样。一旦有人建立了一个模块，使这更容易，但我不记得细节。