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

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

还有一些可用的解决方案如何动态创建组件，如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)
}