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

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我已经设法获得 QueryList<ViewContainerRef> 的列表对于那些 LI 项目，可以向其中添加分隔符组件，但只能在我想要插入的项目之后之前添加。

这是我的组件模板:

<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);

我实际上希望有人对这个问题有更好的答案，因为这感觉就像黑客!