在自定义材料表组件上捕获排序事件（Angular 6）答案

【问题标题】：Catch sort event on custom material table component (Angular 6)在自定义材料表组件上捕获排序事件（Angular 6）
【发布时间】：2018-10-18 02:57:56
【问题描述】：

根据数日的研究以及多个来源的组合以及其他人的帮助，我构建了这个自定义表格组件，我可以将它用于我所有已经内置了所有基础知识的表格。创建表所需要做的就是定义列并传入数据。

但是现在我想添加一个选项来记住使用 cookie 对每个用户进行排序，如果在我使用自定义表格组件的页面上捕获排序事件，我可以做到这一点，但这违背了自定义组件的目的，它会是如果我能在自定义组件中捕捉到它，那就更干净了。

使用自定义组合创建表示例：

<dyn-table [data]="users" [displayedColumns]="displayedColumns" matSort (matSortChange)="sortChange($event)">
    <dyn-col name="user_id"></dyn-col>
    <dyn-col name="user_name"></dyn-col>
</dyn-table>

我需要一种无需在此处添加 (matSortChange)="sortChange($event)" 而是在我的自定义表格组件中捕获 sortChange 的方法来创建表格。

使用自定义表格组件在 app.component.ts 中捕获事件的 StackBlitz（应该在 dyn-table.component.ts 中捕获）。 https://stackblitz.com/edit/angular-jw9whh

似乎应该是一个简单的案例，但我还没有找到解决方案。

【问题讨论】：

标签： angular typescript angular-material2

【解决方案1】：

如果您在自定义组件上操作 matSort 指令，那么您可以使用 HostListener 装饰器来捕获该事件：

dyn-table.component.ts

@HostListener('matSortChange', ['$event'])
sortChange(e) {
  // save cookie with table sort data here
  console.log(e);
}

Forked Stackblitz

【讨论】：