Angular 使用ng内容保留11Y焦点功能

角9和角材料

我正在

foo chip list

元素中包装

mat chip list

。然而，我失去了a11y功能，箭头功能转到下一个芯片。是否仍有保留该功能而不必重新编码mat芯片列表中已编码的内容

此外，cdk门户而不是ng内容是否可以让我在芯片元素中传递信息，并保留原始的mat芯片列表a11y功能，如箭头

foo芯片列表元素：

---

我成功地做到了这一点，但您需要使用一个

@HostListener

，这可能会影响应用程序的其他部分

在

FooChipListComponent

中，添加以下内容：

@ContentChildren(MatChip, { descendants: true }) chips: QueryList<MatChip>;

_keyManager: FocusKeyManager<MatChip>;

@HostListener('keydown', ['$event'])
keydown(event: any) {
  this._keyManager.onKeydown(event);
}

ngAfterContentInit() {
  this._keyManager = new FocusKeyManager<MatChip>(this.chips)
    .withWrap()
    .withVerticalOrientation()
    .withHomeAndEnd()
    .withHorizontalOrientation('ltr');
}

在该组件的Typescript中：

@ViewChild('chipList') chipList: FooChipList;

selectChip(index: number) {
  this.chipList.updateSelection(index);
}

然后在

FooChipList

中，我添加了以下方法：

updateSelection(index: number) {
  this._keyManager.setActiveItem(index);
}

这意味着当点击一个芯片时，它会更新密钥管理器中的活动项，这样键盘导航就可以工作了。请看演示

updateSelection(index: number) {
  this._keyManager.setActiveItem(index);
}