gpt4 book ai didi

angular - 在 Angular2 中使用 ngFor 进行多重包含

转载 作者:太空狗 更新时间:2023-10-29 17:27:43 26 4
gpt4 key购买 nike

我是 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 伪类来避免使用索引,但它也不起作用。

更新

我根据@yurzui(谢谢!!)的回答取得了一些进展。它允许将具有 grid-item-index 值的内容映射到具有相同 grid-item-index 值的 View 容器。

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) {}
}

网格组件.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);
}
}
}

Plunker Example

关于angular - 在 Angular2 中使用 ngFor 进行多重包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44564914/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com