Angular 8 ng-bootstrap表头键盘导航排序列。

Question

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

问题

可排序的表头必须启用键盘导航，以便于访问。表头必须可以通过标签焦点进行选择，并且当按下回车键时，所选列必须触发排序功能。这样，排序功能就可以只通过键盘导航来使用（不需要鼠标）。

版本。

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

尝试

我试着给th元素添加了一个tab索引，使得元素tab聚焦。但是，按下回车键并不能触发排序功能。

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

我还试着添加了(keydown)方法，但键盘事件无法分配给排序事件，而且由于没有传递列和方向参数，因此无法工作。

<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

例子

这是一个包含完整代码的stackblitz。https:/stackblitz.comeditangular-db3bux-g2z44n?file=srcapptable-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});
  }
}