如何为 Angular ngx-datatable 实现双击/dbl 行？

Question

The ngx-datatable does not have a Output property for double clicking a row.

The activate output property emits all events, this could probably be used.

How can I implement this?

Answer 1

I have created a double click directive.

Here to use it:

<ngx-datatable
  (appNgxDatatableDblClick)="onDblClickRow(row)"
  ...
></ngx-datatable>

The directive:

@Directive({
  selector: '[appNgxDatatableDblClick]',
})
export class NgxDatatableDblClickDirective implements OnInit {
  @Output('appNgxDatatableDblClick') dblClick = new EventEmitter();

  constructor(private element: ElementRef) {}

  @HostListener('activate', ['$event'])
  onActivate(event: Model): void {
    if (event.type === 'dblclick' && event.row) {
      this.dblClick.emit(event.row);
    }
  }

  // Can be used for styling (e.g.: .appNgxDatatableDblClick datatable-row-wrapper { cursor: pointer; }
  ngOnInit(): void {
    (this.element.nativeElement as Element).classList.add(
      'appNgxDatatableDblClick'
    );
  }
}