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

【问题标题】：How can a double/dbl click on row be implemented for Angular ngx-datatable?如何为 Angular ngx-datatable 实现双击/dbl 行？
【发布时间】：2022-11-09 17:21:41
【问题描述】：

ngx-datatable 没有用于双击行的 Output 属性。

激活输出属性会发出所有事件，这可能会被使用。

我该如何实施？

【问题讨论】：

标签： angular ngx-datatable

【解决方案1】：

我创建了一个双击指令。

在这里使用它：

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

指令：

@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);
    }
  }

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

【讨论】：