Мое требование примерно такое: у меня есть таблица многоразового использования, которую я хочу использовать в нескольких местах. Я передаю данные таблицы и столбцы, где я использую эту таблицу.
Теперь в некоторых родительских компонентах я хочу получать данные, когда пользователь щелкает строку таблицы или дважды щелкает строку таблицы.
Для этого у меня есть директива, использующая @ HostListener.
Когда я использую директиву для строки таблицы, я могу получить данные строки по щелчку в директиве, но когда я посылаю эти данные, я не получаю их в родительском.
table.component. html
<section class="example-section">
<div class="cdx-table-wrapper cdx-table-wrapper-fixed">
<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-container *ngFor="let disCol of tableColumns; let colIndex = index" matColumnDef="{{disCol}}">
<th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
<td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
</ng-container>
<tr class="persues-table-row" mat-header-row *matHeaderRowDef="tableColumns"></tr>
<tr class="persues-table-row" mat-row *matRowDef="let row; columns: tableColumns;" appTableEvent [rowData]="row"></tr>
</table>
</div>
</section>
table-events.directive.ts
import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[appTableEvent]'
})
export class TableEventDirective {
@Input() rowData;
@Output()
clickHandler: EventEmitter<any> = new EventEmitter();
constructor() { }
@HostListener('click', ['$event'])
onClickHandler(event: MouseEvent) {
this.clickHandler.emit(this);
}
}
родительский компонент
<app-table
[tableData]="dataSourceBase"
[tableColumns]="displayedColumnsBase"
(clickHandler)="onRowClick($event)">
</app-table>
родительский компонент ts
onRowClick(event) {
console.log('onRowClick', event)
}
Я не получаю данные в onRowClick()
method.
Теперь есть некоторые случаи, когда я просто хочу использовать таблицу, чтобы просто показывать данные, в этом случае я не хочу применять директиву.
Заранее спасибо