Поймать событие сортировки в пользовательском компоненте таблицы материалов (Angular 6) - PullRequest
Новая
       6

Поймать событие сортировки в пользовательском компоненте таблицы материалов (Angular 6)

0 голосов
/ 18 октября 2018

Основываясь на днях исследований и комбинировании нескольких источников и помощи от других, я создал этот пользовательский компонент таблиц, который я мог бы использовать для всех своих таблиц, в которых уже есть все основные принципы.Все, что мне нужно сделать, чтобы создать таблицу, это определить столбцы и передать данные.

Но теперь я хочу добавить опцию, чтобы помнить сортировку для пользователя с куки, и я могу это сделать, если перехватить событие сортировки настраница, где я использую пользовательский компонент таблицы, но это противоречит цели пользовательского компонента, и было бы намного чище, если бы я мог просто поймать его внутри пользовательского компонента.

Пример создания таблицы с помощью пользовательского комп: 

<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

Похоже, это должен быть простой случай, но я пока не нашел решения.

1 Ответ

0 голосов
/ 18 октября 2018

Если вы манипулируете директивой matSort для своего пользовательского компонента, вы можете просто использовать HostListener декоратор, чтобы перехватить это событие:

dyn-table.component.ts 

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

Разветвленный стек-блиц

...