Wie Angular2 zu binden Komponente in innerHTML

Question

Ich möchte eine Komponente myApp erstellen, die HTML aus einer Eigenschaft auf dem Controller in seiner Vorlage einbetten wird. Einige dieser HTML-Elemente können jedoch andere Komponentenselektoren enthalten.

import {InfoComponent} from ... 
@Component({ 
    selector: 'myApp', 
    template: `<div [innerHTML]='hData'></div> 
       <myInfo></myInfo>`, 
    directives: [InfoComponent] 
}) 
export class AppComponent { 
    hData = "<myInfo></myInfo>"; 
} 

@Component({ 
    selector: 'myInfo', 
    template: "<b>This is a test</b>" 
}) 
export class InfoComponent { 
} 

In diesem Beispiel würde ich erwarten, This is a test angezeigt zweimal zu sehen. Es scheint jedoch nicht, dass die Angular2-Engine die Tatsache aufgreift, dass der Selektor der Komponente injiziert wurde, so dass die Vorlage nie für den Selektor <myInfo></myInfo> generiert wird, der über die Bindung hinzugefügt wird.

Sie können eine demo here sehen.

Gibt es eine Möglichkeit, Angular2 zu veranlassen, den Selektor auf dieselbe Weise zu analysieren, wie mit dem Selektor, der explizit in der Vorlage hinzugefügt wird?

Answer 1

Es ist nicht möglich, [innerHtml]="..." Angular Komponenten oder Direktiven zu erstellen oder Bindungen zu erstellen.

Am nächsten für diese Anforderung ist DynamicComponentLoader. (DynamicComponentLoader wurde vor einer Weile entfernt) ViewContainerRef.createComponent()

Angular 2 dynamic tabs with user-click chosen components Siehe Beispiel

Da RC.5 Angular2 Arten saniert und HTML hinzugefügt durch Bindung. Weitere Informationen finden Sie unter In RC.1 some styles can't be added using binding syntax.