Estoy escribiendo componentes angulares para el marco css de base. Estoy trabajando en el componente de pestañas y quiero poder pasar algo de HTML al <ng-content> de esto.
El problema es que también necesito pasar html en el que un usuario puede poner enlaces, como este:
PLANTILLA PARA PADRES
<tabs [data]='example'> <div> Age <br> {{item.age}} </div>` </tabs>COMPONENTE PESTAÑAS
<ul class="tabs" #tabs> <li *ngFor="let item of data | async" (click)="tabClick($event)"> <a>{{item.name}}</a> </li> </ul> <div> <ng-content></ng-content> </div>PESTAÑAS MECANOGRAFÍA
@Component({ selector: 'tabs', templateUrl: './tabs.component.html' }) export class TabsComponent { @Input('data') data:any; @ViewChild('tabs') tabs: ElementRef; } Donde item es una referencia a un objeto en la matriz de example .
Sin embargo, aparece este error: Cannot read property 'name' of undefined ya que el item se está evaluando antes de insertarlo en la directiva <ng-content> .
¿Hay alguna manera de sortear esta limitación, o lo estoy haciendo de manera incorrecta?
actualizar angular 5
ngOutletContext pasó a llamarse ngTemplateOutletContext
Consulte también https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
ngTemplateOutlet o ngForTemplate se pueden usar para ese caso de uso:
<tabs [data]='example'> <ng-template let-item> <div> Age <br> {{item.age}} </div>` </ng-template> </tabs> @Component({ ... template: ` <ul class="tabs" #tabs> <li *ngFor="let item of data | async" (click)="tabClick($event)"> <a>{{item.name}}</a> </li> </ul> <div> <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template> </div> ` }) class TabsComponent { @ContentChild(TemplateRef) templateRef:TemplateRef; }Ver también Angular 2 enlazar contenido transcluido a variable de bucle
Deberías estar usando esta manera en su lugar,
<tabs [data]='example'> <div> Age <br> {{item.age}} </div>` </tabs>Componente mecanografiado
@Component({ selector: 'tabs', templateUrl: './tabs.component.html' }) export class TabsComponent { @Input() data:any; item:any{}; }En su proyección de contenido, defina un selector como
<div class="tabs-body"> <ng-content select=".tabs-body"> </ng-content> </div>Como tu paso con ataduras
<tabs [data]='example'> <div> Age <br> {{item.age}} </div>` </tabs>Debe pasar el objeto del elemento al componente ng-content.
<ng-content [item]="selectedTab></ng-content>No estoy seguro de lo que hay detrás del evento de clic de pestaña, pero puede asignar ese objeto de elemento a la pestaña seleccionada que se pasará al componente.
El componente que controlará la vista de pestaña puede tener lo siguiente:
@Input() item: Item;Y esto pasará ese objeto cuando hagas clic. Podría estar atacando esto desde el ángulo equivocado, pero tal vez te ayude de alguna manera.