如何使用angular 2组件动态添加innerHTML

Question

我正在为组件库创建文档.我想要1个html字符串,它可以生成页面上的组件和文档.

我想要的是:

是)我有的:

当我检查HTML时,我的按钮标签不存在.当我使用innerHTML时,它们被剥离了.

我的组件代码:

private flatButtons = `<div class="button-wrapper">
      <my-button [type]="'default'" [raised]="false">Default</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'primary'" [raised]="false">Primary</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'success'" [raised]="false">Success</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'info'" [raised]="false">Info</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'warning'" [raised]="false">Warning</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'danger'" [raised]="false">Danger</my-button>
    </div>`

constructor() {}

getCode() {
    return html_beautify(this.flatButtons, this.options)
}

我的HTML模板:

<div class="row">
<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <div id="flatButtons" [innerHTML]="getCode()">
    </div>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <pre>{{getCode()}}</pre>
</div>

Answer 1

Angular不处理动态添加的HTML,它只是逐字添加,除了一些清理以防止安全问题.请参阅在RC.1中,无法使用绑定语法添加某些样式,以防止清除 HTML的清理程序.

您可以使用ViewContainerRef.createComponent()像显示在角2个动态标签与用户点击选择组件动态添加组件.

还有一些解决方案可用于动态创建组件,如Angular 2中的$ compile等效项所示