在自定义 material table 组件上捕获排序事件 (Angular 6)

Question

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

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

示例 table 使用自定义组件创建：

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

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

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

看起来应该是一个简单的案例，但我还没有找到解决这个问题的方法。

Answer 1

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

dyn-table.component.ts

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

Forked Stackblitz

在自定义 material table 组件上捕获排序事件 (Angular 6)

Catch sort event on custom material table component (Angular 6)

typescript

angular-material2

angular