formularios - Cómo hacer que Angular2 vincule el componente en innerHTML

ng-content angular 6

Question

Quiero crear un componente myApp que incruste HTML de una propiedad en el controlador en su plantilla. Sin embargo, parte de ese HTML puede incluir otros selectores de componentes.

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

En este ejemplo, esperaría ver This is a test muestra dos veces. Sin embargo, no parece que el motor Angular2 detecte el hecho de que el selector del Componente se ha inyectado para que la plantilla nunca se genere para el <myInfo></myInfo> que se agrega a través del enlace.

Puedes ver una demostración aquí .

¿Hay alguna manera de hacer que Angular2 analice el selector de la misma manera que lo hace con el selector que se agrega explícitamente en la plantilla?

Answer 1

No hay forma de que [innerHtml]="..." instancias de componentes angulares o directivas o establezca enlaces.

El más cercano para este requisito es DynamicComponentLoader . (DynamicComponentLoader se eliminó hace un tiempo) ViewContainerRef.createComponent()

Consulte las pestañas dinámicas de Angular 2 con componentes elegidos por el usuario para un ejemplo

Dado que RC.5 Angular2 desinfecta los estilos y el HTML agregado a través del enlace. Consulte En RC.1 algunos estilos no se pueden agregar usando la sintaxis de enlace para más detalles.