Question

让我们说我有一个项目列表，LI样式，如联系人列表或做这样的事情：

<li data-letter="J">James Taylor</li>
<li data-letter="J">John Connor</li>
<li data-letter="K">Kyle Connor</li>
<li data-letter="P">Peter Parker</li>

我需要在其中一些元素之间动态添加字母分隔符，其结果应该是这样的：

<separator-component>- J -</separator-component>
<li data-letter="J">James Taylor</li>
<li data-letter="J">John Connor</li>
<separator-component>- K </separator-component>
<li data-letter="K">Kyle Connor</li>
<separator-component>- P -</separator-component>
<li data-letter="P">Peter Parker</li>

使用ViewChildren我已设法获取这些LI项目的QueryList<ViewContainerRef>列表，并可以将分隔符组件添加到它们，但只有后我想要的项目插入之前。

这是我的组件模板：

<li #listItems *ngFor="let element of elements" [attr.data-letter]="element.letter">{{ element.name }}</li>

这是代码（相关部分）：

@ViewChildren('listItems', {read: ViewContainerRef}) listItems: QueryList<ViewContainerRef>;

addItem(index: number) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SeparatorComponent);
    const componentRef = this.listItems.toArray()[index].createComponent(componentFactory, 0);

    componentRef.changeDetectorRef.detectChanges();

    this.letterRefs.push(componentRef);
}

这是我到目前为止的结果......

<li data-letter="J">James Taylor</li>
<separator-component>- J -</separator-component>
<li data-letter="J">John Connor</li>
<li data-letter="K">Kyle Connor</li>
<separator-component>- K </separator-component>
<li data-letter="P">Peter Parker</li>
<separator-component>- P -</separator-component>

有什么建议吗？

Answer 1

这似乎有效：

<ng-container *ngFor="let element of elements" #listItems>
    <li [attr.data-letter]="element.letter">{{ element.name }}</li>
</ng-container>

修改：仔细检查后，这可行，因为ng-container在li之前成为DOM中的注释：

<!---->
<li></li>

并且createComponent始终在（不在内部）ViewContainerRef之后呈现新组件，这是本案例中的注释。

所以有点像做以下事情：

<ng-container *ngFor="let element of elements"> <ng-container #listItems></ng-container> <li [attr.data-letter]="element.letter">{{ element.name }}</li> </ng-container>

此外，此行中的0可以删除，因为我们不再关心索引了：

this.listItems.toArray()[index].createComponent(componentFactory, 0);

我实际上希望有人能更好地回答这个问题，因为感觉就像是黑客！

如何在Angular 2+中的另一个列表元素之前动态添加组件

1 个答案: