Come ottenere Angular2 per associare il componente in innerHTML

Question

Desidero creare un componente myApp che incorpori l'HTML da una proprietà sul controller nel suo modello. Tuttavia, alcuni di questi HTML potrebbero includere altri selettori di componenti.

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 questo esempio, mi sarei aspettato di vedere This is a test visualizzati due volte. Tuttavia, non sembra che il motore Angular2 riceva il fatto che il selettore del componente è stato iniettato, quindi il modello non viene mai generato per il selettore <myInfo></myInfo> che viene aggiunto tramite il bind.

È possibile vedere uno demo here.

C'è un modo per ottenere Angular2 per analizzare il selettore nello stesso modo in cui lo fa con il selettore che viene aggiunto esplicitamente nel modello?

Answer 1

Non esiste alcun modo per rendere [innerHtml]="..." l'istanza di componenti o direttive Angolari o stabilire alcun binding.

Il più vicino per questo requisito è DynamicComponentLoader. (DynamicComponentLoader è stato rimosso qualche tempo fa) ViewContainerRef.createComponent()

Vedi Angular 2 dynamic tabs with user-click chosen components per un esempio

Dal RC.5 Angular2 disinfetta stili e HTML aggiunto attraverso il legame. Vedere In RC.1 some styles can't be added using binding syntax per ulteriori dettagli.