So fügen Sie innerHTML dynamisch mit eckigen 2 Komponenten hinzu

Question

Ich erstelle Dokumente für eine Komponentenbibliothek. Ich möchte 1 HTML-String, der sowohl die Komponente auf der Seite als auch die Dokumente dafür generiert.

Was ich will:

Was ich habe:

Wenn ich die HTML inspizieren, my-Taste-Tags nicht vorhanden sind. Sie werden entfernt, wenn ich innerHTML verwende.

Mein Komponentencode:

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) 
} 

Meine HTML-Vorlage:

<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 nicht Prozess HTML dynamisch hinzugefügt, es kommt noch hinzu, wörtlich es mit Ausnahme einiger sanitization Sicherheit zu verhindern Probleme. Siehe In RC.1 some styles can't be added using binding syntax für, wie man den Entkeimer des Abstreifens des HTML verhindert.

Sie können ViewContainerRef.createComponent() wie in Angular 2 dynamic tabs with user-click chosen components gezeigt verwenden, um Komponenten dynamisch hinzuzufügen.

Es gibt auch Lösungen zur Verfügung, wie die Komponenten dynamisch wie in Equivalent of $compile in Angular 2

Answer 2

gezeigt erstellen werde ich Gunter Antwort akzeptieren, da ich meine Frage beantwortet.

Für diejenigen, die interessiert sind, die Art, wie ich mein Problem gelöst habe, war durch Erstellen einer Komponente und erfordert es.

habe ich eine dumme Komponente:

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


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

    constructor() { 
    } 
} 

Und dann template geändert 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> 

Und meine modifizierte Komponente Code:

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

constructor() {} 

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