获取 mat-row angular 4 ViewContainerRef 的最佳方法答案

【问题标题】：Best way to get ViewContainerRef of mat-row angular 4获取 mat-row angular 4 ViewContainerRef 的最佳方法
【发布时间】：2018-06-06 22:54:29
【问题描述】：

我有一个 mat-table，现在我想获取单击行的 ViewContainerRef，以便我可以在该行中添加另一个组件。您能否告诉我获取行的 ViewContainerRef 的最佳方法。

目前我正在使用 ViewChildren 获取它，使用 myRow 作为 mat-row 的 ID。

@ViewChildren("myRow", { read: ViewContainerRef }) containers;

我在点击该行时传递索引。

<mat-row #myRow *matRowDef="let row; columns: colInfo;let index=index" 
            (click)="expandRow(index, row)"></mat-row>

基于索引，我正在获取 ViewContainerRef 之类的

const container = this.containers.toArray()[index];

并创建如下所示的组件。

const factory = this.resolver.resolveComponentFactory(DetailTableComponent);
const component = container.createComponent(factory);

如果我不在桌子上进行排序，它工作正常。由于两个原因，一旦我执行排序，组件就会随机添加到不同的行中
1. 排序后索引会立即更新（它总是按行的顺序从 0 设置为 n）
2. ViewContainerRef 仍然有旧数据，即排序前的数据。

如果以上两个问题中的任何一个都解决了，那么我相信我的问题会得到解决。或者如果我能得到点击的 ViewContainerRef 那么我相信我的问题会得到解决。

请帮忙。

【问题讨论】：

老兄！！完全相同的问题。当排序发生时，ViewContainerRef 的 QueryList 没有更新。你是怎么解决的？

标签： angular typescript

【解决方案1】：

我也一直在努力解决如何从模板中获取特定的ViewContainerRef。我现在能想到的最简单的解决方案：

改变这个

expandRow(index, row)

到

expandRow(index, row, myRow)

这是将 myRow 作为 nativeElement 传递。

然后，而不是

const container = this.containers.toArray()[index];

写

const containers = this.containers.toArray();

从那里你应该能够查找索引i where

containers[i].element.nativeElement === myRow

【讨论】：