在 Angular2 中使用 ngFor 进行多重包含
Multiple transclusion using ngFor in Angular2
我是 angular2 的新手,我正在尝试制作一个名为“grid”的小 angular 组件,它只是重新排列其使用嵌入的内容。
它的模板
网格组件模板(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>
这是 Plunker。
但是结果显示没有内容。但是使用...
<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>
运行良好,结果如我所料。
A Plunker 最后一个工作案例。
可以使用 ngfor 或类似工具实现此结果。
我试过使用 nth-child css 伪 class 来避免使用索引,但它也不起作用。
更新
我根据@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>
网格项目索引指令
@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
您可以使用 ngTemplateOutlet 来实现此目的,但还有另一种方法使用低级 API:
parent.component.html
<grid>
<div *ngFor="let item of items">
<span>{{item}}</span>
</div>
</grid>
帮助我们识别目标索引的附加指令。
@Directive({
selector: '[grid-item-index]'
})
export class GridItemIndexDirective {
@Input('grid-item-index') index: any;
constructor(public vcRef: ViewContainerRef) {}
}
grid.component.html
<div class="grid">
<div class="row">
<div class="col-xs-4">
<ng-template grid-item-index="1"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="2"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="3"></ng-template>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ng-template grid-item-index="4"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="5"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="6"></ng-template>
</div>
</div>
</div>
grid.component.ts
@ContentChild(TemplateRef, { read: ViewContainerRef }) vcRef: ViewContainerRef;
@ViewChildren(GridItemIndexDirective) containers: QueryList<GridItemIndexDirective>;
ngAfterViewInit() {
const len = this.vcRef.length;
for( var i = 1; i <= len; i++) {
const destinationContainer = this.containers.find(x => x.index == i);
if(destinationContainer) {
const view = this.vcRef.detach(0);
destinationContainer.vcRef.insert(view);
}
}
}
我是 angular2 的新手,我正在尝试制作一个名为“grid”的小 angular 组件,它只是重新排列其使用嵌入的内容。
它的模板
网格组件模板(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>
这是 Plunker。
但是结果显示没有内容。但是使用...
<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>
运行良好,结果如我所料。
A Plunker 最后一个工作案例。
可以使用 ngfor 或类似工具实现此结果。
我试过使用 nth-child css 伪 class 来避免使用索引,但它也不起作用。
更新
我根据@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>
网格项目索引指令
@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
您可以使用 ngTemplateOutlet 来实现此目的,但还有另一种方法使用低级 API:
parent.component.html
<grid>
<div *ngFor="let item of items">
<span>{{item}}</span>
</div>
</grid>
帮助我们识别目标索引的附加指令。
@Directive({
selector: '[grid-item-index]'
})
export class GridItemIndexDirective {
@Input('grid-item-index') index: any;
constructor(public vcRef: ViewContainerRef) {}
}
grid.component.html
<div class="grid">
<div class="row">
<div class="col-xs-4">
<ng-template grid-item-index="1"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="2"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="3"></ng-template>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ng-template grid-item-index="4"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="5"></ng-template>
</div>
<div class="col-xs-4">
<ng-template grid-item-index="6"></ng-template>
</div>
</div>
</div>
grid.component.ts
@ContentChild(TemplateRef, { read: ViewContainerRef }) vcRef: ViewContainerRef;
@ViewChildren(GridItemIndexDirective) containers: QueryList<GridItemIndexDirective>;
ngAfterViewInit() {
const len = this.vcRef.length;
for( var i = 1; i <= len; i++) {
const destinationContainer = this.containers.find(x => x.index == i);
if(destinationContainer) {
const view = this.vcRef.detach(0);
destinationContainer.vcRef.insert(view);
}
}
}