排序列上的 Angular 8 ng-bootstrap 表标题键盘导航

Question

我正在构建一个带有可排序标题的数据表，如文档中的 example 所示。

问题

可排序的表格标题必须启用键盘导航才能访问。表格标题必须可以通过选项卡焦点进行选择，并且选定的列必须在按下回车按钮时触发排序功能。这样排序只能用于键盘导航（不需要鼠标）。

版本：

"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@angular/core": "~8.2.14",

尝试

我尝试向第 th 元素添加选项卡索引，这使元素选项卡聚焦。但是，按回车键不会触发排序功能。

<th scope="col" tabindex="0" sortable="name" (sort)="onSort($event)">Country</th>

我也试过添加(keydown)方法，但是键盘事件是不能赋值给排序事件的，因为没有传入column和direction参数所以不会起作用。

<th scope="col" tabindex="0" sortable="name" (keydown)="onSort($event)" (sort)="onSort($event)">Country</th>

Argument of type 'KeyboardEvent' is not assignable to parameter of type 'SortEvent'.
Type 'KeyboardEvent' is missing the following properties from type 'SortEvent': column, direction

示例

这是一个包含完整代码的堆栈闪电战： https://stackblitz.com/edit/angular-db3bux-g2z44n?file=src/app/table-complete.html

Answer 1

我添加了@HostListener 并尝试了您的 stackblitz 似乎正在工作

export class NgbdSortableHeader {
  @HostListener('keydown', ['$event'])
  onKeyDown(e) {
    console.log(e);
    if(e.which === 13) { //only react to "Enter"
       this.rotate();
    }
  }

  @Input() sortable: SortColumn = '';
  @Input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}