Question

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

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

使用自定义comp创建表的示例：

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

具有自定义表组件的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

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

1 个答案: