如何解决保持ng-content的所有焦点功能
Angular 9和Angular材质
我将mat-chip-list
包装在foo-chip-list
元素中。但是,我失去了箭头功能转到下一个芯片的a11y功能。无论如何,是否需要保留该功能而不必重新编码mat-chip-list中已经编码的内容?
此外,我可以通过cdk门户而不是ng-content来传递芯片元素并仍然保留原始的芯片列表等箭头功能吗?
foo-chip-list元素:
<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>
解决方法
我设法做到了,但是您需要使用@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
元素替换为筹码之后,使用Material的a11y中的<ng-content>
在筹码上设置键盘焦点/导航。 @ContentChildren
负责获取筹码-我们需要使用<ng-content>
而不是ViewChildren,而是使用ContentChildren。
keydown
方法将keydown事件传递给FocusKeyManager
,当您按下方向箭头键时,它将负责导航。
我制作了working StackBlitz demo。如果您将ariaOrientation
中的vertical
的值更改为foo-chip-list.component.ts
,将会看到它如何与堆叠的筹码一起工作。
更新:
发布上述解决方案后,我发现了一个问题。在演示中,单击第三芯片(“ Primary Fish”),然后按向右箭头。您会注意到,选择内容现在移至第一个筹码而不是第四个筹码。这是因为使用鼠标进行选择时activeItemIndex
不会更新。为了解决这个问题,我在组件中进行了以下更改,在其中定义了要用作ng-content的芯片:
<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>
,并在该组件的Typescript中:
@ViewChild('chipList') chipList: FooChipList;
selectChip(index: number) {
this.chipList.updateSelection(index);
}
然后在FooChipList
中,我添加了以下方法:
updateSelection(index: number) {
this._keyManager.setActiveItem(index);
}
这意味着单击芯片时,它将更新密钥管理器中的活动项目,因此可以进行键盘导航。请参见this StackBlitz进行演示。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。