Я новичок в angular2, и я пытаюсь создать небольшой угловой компонент под названием «grid», который просто перестраивает свое содержимое с помощью включения.
Его шаблон
шаблон компонента сетки (grid.component.ts)
<div class="grid">
<div class="row">
<div class="col-xs-4">
<ng-content select="[grid-item-index=0]"></ng-content>
</div>
<div class="col-xs-4">
<ng-content select="[grid-item-index=1]"></ng-content>
</div>
<div class="col-xs-4">
<ng-content select="[grid-item-index=2]"></ng-content>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ng-content select="[grid-item-index=3]"></ng-content>
</div>
<div class="col-xs-4">
<ng-content select="[grid-item-index=4]"></ng-content>
</div>
<div class="col-xs-4">
<ng-content select="[grid-item-index=5]"></ng-content>
</div>
</div>
</div>
И это часть родительского компонента, который его использует.
родительский шаблон
<grid>
<div *ngFor="let item of items; index as i" [attr.grid-item-index]="i">
<span>{{item}}</span>
</div>
</grid>
Вот планкер.
Но результат не отображает содержимое. Но используя...
<grid>
<div grid-item-index="0">item 0</div>
<div grid-item-index="1">item 1</div>
<div grid-item-index="2">item 2</div>
<div grid-item-index="3">item 3</div>
<div grid-item-index="4">item 4</div>
<div grid-item-index="5">item 5</div>
</grid>
он отлично работает, и результат был таким, как я ожидал.
Plunker последнего рабочего случая.
Можно добиться этого результата, используя ngfor или аналогичный.
Я пытался использовать псевдокласс nth-child css, чтобы избежать использования индекса, но он тоже не работает.
ОБНОВИТЬ
Я добился некоторого прогресса, основываясь на ответе @yurzui (Спасибо!!). Он позволяет отображать содержимое со значением grid-item-index в контейнер представления с таким же значением grid-item-index.
parent.component.html
<grid>
<ng-template *ngFor="let item of items; let i=index"
[grid-item-index]="(items.length-1)-i">
<span >{{item}}</span>
</ng-template>
</grid>
директива grid-item-index
@Directive({
selector: '[grid-item-index]'
})
export class GridItemIndexDirective {
@Input('grid-item-index') index: any;
constructor(public vcRef: ViewContainerRef, public tRef: TemplateRef) {}
}
grid.component.ts
@ContentChildren(GridItemIndexDirective) sources: QueryList<GridItemIndexDirective>;
@ViewChildren(GridItemIndexDirective) containers: QueryList<GridItemIndexDirective>;
constructor(
private cdRef:ChangeDetectorRef
) {}
ngAfterViewInit() {
const len = this.sources.length;
for (var i = 0; i < len; i++) {
const destinationContainer = this.containers.find(x => x.index == i);
const source = this.sources.find(x => x.index == i);
if (destinationContainer) {
destinationContainer.vcRef.createEmbeddedView(source.tRef);
this.cdRef.detectChanges(); // this solves ExpressionChangedAfterItHasBeenCheckedError
}
}
}
Проверьте этот Plunker.
template="
устарел, то plnkr.co/edit/GzaFRu2T8vKqyPdEkBjv?p=preview - person yurzui   schedule 15.06.2017