如何使用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，它只是逐字添加，除了一些清理以防止安全问题。 有关如何防止清除HTML的消毒剂，请参阅In RC.1 some styles can't be added using binding syntax。

您可以使用Angular 2 dynamic tabs with user-click chosen components中显示的ViewContainerRef.createComponent()动态添加组件。

还有一些解决方案如何动态创建组件，如Equivalent of $compile in Angular 2

所示

Answer 2

我接受了Gunter的回答，因为它回答了我的问题。

对于那些感兴趣的人，我解决问题的方法是创建一个组件并要求它。

我创建了一个愚蠢的组件：

import {Component} from '@angular/core';


@Component({
  selector: 'flat-buttons',
  template: require('./flatButtons.html'),
})
export class FlatButtons {

  constructor() {
  }
}

然后我修改了html模板：

<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <flat-buttons></flat-buttons>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <h3>Code Snippet</h3>
  <div class="well">
    <pre>{{getFlatButtons()}}</pre>
  </div>
</div>

我修改过的组件代码：

private flatButtons = require('./components/flatButtons/flatButtons.html')

constructor() {}

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