web-dev-qa-db-ja.com

angular 2コンポーネントでinnerHTMLを動的に追加する方法

コンポーネントライブラリのドキュメントを作成しています。ページ上のコンポーネントとそのドキュメントの両方を生成するHTMLの1文字列が必要です。

私が欲しいもの：

enter image description here

私が持っているもの：

enter image description here

HTMLを検査すると、my-buttonタグは存在しません。 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>
angularinnerhtml
10
collinglass

Angularは動的に追加されたHTMLを処理せず、セキュリティ問題を防ぐためのサニタイズを除いて、そのままHTMLを追加します。 RC.1では、バインド構文を使用して一部のスタイルを追加できない を参照してください。HTMLを削除するサニタイザーを防ぐ方法について。

ユーザーがクリックしたコンポーネントを選択したAngular 2動的タブ に示すようなViewContainerRef.createComponent()を使用して、コンポーネントを動的に追加できます。

$ compile in Angular 2 に示すように、コンポーネントを動的に作成する方法も利用できます。

5
Günter Zöchbauer

Gunterの質問に回答するので、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)
}
0
collinglass