Angular ViewChild自定义排序选择器

Question

我目前正在学习角度ViewChild，但在使用ViewChild从DOM中选择自定义引用变量时，我似乎遗漏了一些东西。

在我的模板中，我有两张桌子：

<mat-table #eventTable [dataSource]="eventDataSource" matSort>
<mat-table #eventDateTable [dataSource]="dateEventDataSource" matSort>

我试图以每种方式对其进行定位：

@ViewChild('eventTable') eventTableSort: MatSort;
@ViewChild('eventDateTable') eventDateTableSort: MatSort;

然后我尝试在ngAfterViewInit()中启动它们：

this.eventDataSource.sort = this.eventTableSort;
this.dateEventDataSource.sort = this.eventDateTableSort;

当我单击标题对每列进行排序时，结果是在任何一个表上都没有发生。我确信有一些简单的东西我在这里俯瞰，但我看不出它是什么。如何使这些表中的每一个彼此独立排序？

Answer 1

我一直试图按照this问题来推导和回答，但这对我没有意义。所以我潜入debugger并找到了我的问题的答案。

声明引用变量（#eventTable和#eventDateTable）时，您正在创建对已声明它的元素/组件/指令的引用。在我的示例中，我创建了对我创建的每个<mat-table>的引用。然后我尝试将这些表本身分配给eventTableSort和eventDateTableSort值。在ngAfterViewInit()我实际上是在说每个数据集的排序等于它所存储的表。

为每个表定位MatSort的正确方法是在设置引用变量时声明它。 #eventTable将直接创建对该表的MatSort对象的引用，而不是#eventTable="matSort"将为整个表创建引用。然后，在您的组件中，您可以使用ViewChild定位MatSort本身。

以上是我上面编写的相同代码，现在正常工作：

<mat-table #eventTable="matSort" [dataSource]="eventDataSource" matSort>
<mat-table #eventDateTable="matSort" [dataSource]="dateEventDataSource" matSort>

@ViewChild('eventTable') eventTableSort: MatSort;
@ViewChild('eventDateTable') eventDateTableSort: MatSort;

this.eventDataSource.sort = this.eventTableSort;
this.dateEventDataSource.sort = this.eventDateTableSort;