¿Hay alguna manera de establecer dinámicamente el valor de la directiva * ngTemplateOutlet?
Algo por el estilo:
<div *ngFor="let item of [ 'div', 'span' ]"> <ng-container *ngTemplateOutlet="{{ item }}"></ng-container> </div> <ng-template #div> <div>some text inside a div</div> </ng-template> <ng-template #span> <span>some text inside a span</span> </ng-template>Por supuesto que no funciona, pero supongo que explica bastante bien lo que estoy tratando de lograr: si el elemento es "div", entonces debería mostrar la plantilla #div, si es "span", la #span.
Simplemente apunte ngTemplateOutlet a una variable que sea TemplateRef :
En HTML:
<button (click)="toggleTemplateSelected()">Toggle Template</button> <br /> <p>Showing <span class='viewType' *ngIf="showViewTemplate">C</span> <span class='viewType' *ngIf="!showViewTemplate">C2</span> template:</p> <ng-container *ngTemplateOutlet='liveTemplate'></ng-container> <!--Templates: --> <ng-template #tmplC> Hello from TemplateC </ng-template> <ng-template #tmplC2> Hello from TemplateC2 </ng-template>En codigo:
@ViewChild('tmplC') tmplC: TemplateRef<any>; @ViewChild('tmplC2') tmplC2: TemplateRef<any>; showViewTemplate = true; liveTemplate: TemplateRef<any>; toggleTemplateSelected() { this.showViewTemplate = !this.showViewTemplate; this.liveTemplate = this.showViewTemplate ? this.tmplC : this.tmplC2; } También podría apuntar ngTemplateOutlet a una función que devuelve un TemplateRef .
Aquí está la solución factible más corta y mejor.
1 Crear directiva "dynamic-template.directive.ts"
import { Directive, Input, TemplateRef } from '@angular/core'; @Directive({ selector: '[dynamic-template]' }) export class DynamicTemplateDirective { @Input() id: number; constructor(public template: TemplateRef<any>) { } }2 Defina la plantilla dinámica en su componente helper-content.component.html
<ng-template [dynamic-template] [id]="1"> This is 1st Template </ng-template> <ng-template [dynamic-template] [id]="2"> This is 2nd Template </ng-template> <ng-template [dynamic-template] [id]="3"> This is 3rd Template </ng-template>3 use una plantilla dinámica en su componente helper-content.component.ts
import { DynamicTemplateDirective } from '@app/components/dynamic-template.directive'; export class HelperContentComponent implements OnInit { helpTemplate: TemplateRef<any>; @ViewChildren(DynamicTemplateDirective) templateRefs: QueryList<DynamicTemplateDirective>; constructor(private eventService: EventEmitterService) { } getTemplate(templateId: number): TemplateRef<any> { return this.templateRefs.toArray().find(x => x.id == templateId).template; } showHelperContent(id: number) { this.helpTemplate = this.getTemplate(id); } }4 Use la variable helpTemplate en helper-content.component.html
<div class="content" > <ng-container *ngTemplateOutlet="helpTemplate"></ng-container> </div>Envuelva el elemento entre paréntesis para que se evalúe como una expresión. *ngTemplateOutlet="(item.ref)" Si eso no funciona, let item of [ { ref: 'div' }, { ref: 'span'} ] y use *ngTemplateOutlet="item.ref" Similar a No puedo hacer que ngTemplateOutlet funcione