角度2：在innerHTML中加載動態組件

Question

我有2個@components說和。 現在，我必須像下面這樣說動態加載為innerHTML

組件1.HTML

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

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

component-2已經通過聲明[]注入到app.module.ts文件中。 safeHtml也是用於安全HTML轉換的管道。

即使這樣，問題仍然是component-2沒有加載。 誰能建議我該如何解決？

注意：

• 如果我將component-2直接包含在component-1.html中，它將起作用。 但是，在某些情況下，我們無法動態注入component-2。
• 堆棧基於Angular2，TypeScript和Webpack構建。

Answer 1

Angular不會處理傳遞給[innerHTML]="..." HTML，除非出於安全目的進行了清理。 不會創建綁定，組件，指令...，因為如上所述，Angular會忽略其內容。 您可以做的是在運行時創建一個組件，如Angular 2中的$ compile等效中所述 。 AFAIR有人構建了一個模塊，可以簡化此過程，但我不記得詳細信息。