保留具有ng内容的a11y焦点功能
角9和角材料
我正在用mat-chip-list元素包装foo-chip-list。但是，我失去了箭头函数指向下一个芯片的a11y功能。有没有保留这种功能，而不需要重新编码什么已经编码的垫芯片列表？
另外，cdk门户网站，而不是ng内容，会不会是一种方式，我可以传递的芯片元素，但仍然保留原来的垫芯片列表的a11y功能，如箭头？
foo-芯片列表元素：
<mat-chip-list
[aria-orientation]= "ariaOrientation"
[multiple]="multiple"
[selectable]="selectable"
class="atlas-chip-list"
[ngClass]="{'mat-chip-list-stacked' : ariaOrientation == 'vertical'}">
<ng-content></ng-content>
</mat-chip-list>回答 1
Stack Overflow用户
发布于 2020-08-28 09:30:38
我成功地做到了这一点，但是您需要使用可能影响应用程序其他部分的@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');
}这使用从材料的FocusKeyManager的a11y设置键盘焦点/导航芯片后，<ng-content>元素已被替换为芯片。@ContentChildren负责芯片的获取--我们需要使用ContentChildren而不是ViewChildren，因为我们使用的是<ng-content>。
keydown方法将按键事件传递给FocusKeyManager，当您按下方向箭头键时，该事件将负责导航。
我制作了一个工作StackBlitz演示。如果您将ariaOrientation的值更改为foo-chip-list.component.ts中的vertical，您将看到它如何与堆叠芯片一起工作。
更新:在发布上述解决方案后，我发现了一个问题。在演示中，单击第三个芯片(“初级鱼类”)并按右箭头。您会注意到，选择现在移动到第一个芯片，而不是第四个芯片。这是因为当您使用鼠标选择时，activeItemIndex不会被更新。为了解决这个问题，我在组件中做了以下更改，其中定义了用作ng内容的芯片：
<foo-chip-list #chipList>
<mat-chip (click)="selectChip(0)">One fish</mat-chip>
<mat-chip (click)="selectChip(1)">Two fish</mat-chip>
<mat-chip (click)="selectChip(2)">Primary fish</mat-chip>
<mat-chip (click)="selectChip(3)">Accent fish</mat-chip>
</foo-chip-list>在该部分的打字本中：
@ViewChild('chipList') chipList: FooChipList;
selectChip(index: number) {
this.chipList.updateSelection(index);
}然后在FooChipList中添加了以下方法：
updateSelection(index: number) {
this._keyManager.setActiveItem(index);
}这意味着当一个芯片被点击时，它会更新键管理器中的活动项，因此键盘导航工作。请参阅这个StackBlitz的演示。
https://stackoverflow.com/questions/63380830
复制相似问题
腾讯云开发者
