¿Hay alguna manera de pasar variables a plantillas en Angular2?
Digamos que tengo el siguiente código:
<div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner"</ng-container> </div> --------------- <ng-template #inner> {{ foo.name }} </ng-template> ¿Cómo puedo obtener la plantilla para imprimir el name de foo ?
Deberías hacer esto:
<div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner; context:foo"></ng-container> </div> <ng-template #inner let-name="name"> {{ name }} </ng-template>en mi caso necesitaba que el objeto permaneciera intacto porque tenia algun tipo de recursividad, esto funciono
<div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner; context: {foo : foo}"></ng-container> </div> <ng-template #inner let-foo="foo"> {{ foo.attributexy }} </ng-template>Pero esto no funciona si la plantilla se encuentra en otro componente. ¿Cómo se pasa un objeto de contexto en tal escenario?
yo añadí
@Input() itemTemplate: TemplateRef<any>;
en el componente donde lo usaré, y en la plantilla de este componente escribo algo como esto:
<ng-container *ngTemplateOutlet="itemTemplate; context: item"></ng-container>Código de plantilla del componente exterior:
<ng-template #dataRendererTpl let-data="data"> <div class="data">Hello, {{data.name}}</div>Simplemente pase el enlace a dataRendererTpl como propiedad @Input() al componente en el que lo necesita