使用 Angular CDK FocusKeyManager 处理选项卡

Question

我正在使用 CDK FocusKeyManager 来管理基于键盘交互的项目列表。各个项目可以获得本机焦点。这工作正常，我可以通过选项卡浏览项目以及通过键盘按键进行导航。

问题是，如果我开始混合这两种导航方式（通过选项卡和箭头键），FocusKeyManager 就会感到困惑。经理似乎没有正确跟踪活动项目。如果我开始通过箭头键移动焦点，然后使用 Tab 键继续，然后返回箭头键，则焦点将继续在我使用箭头键离开的位置，而不是当前焦点所在的位置。

由于这很难描述，我创建了一个 StackBlitz 来玩：https://stackblitz.com/edit/cdk-focuskeymanager-zfy8pt。

我做错了什么？

Answer 1

我现在开始工作了，我监听该项目的焦点事件，并设置父项的密钥管理器的活动项目。

子组件：

private _parent = inject(ParentComponent);
constructor() {
    fromEvent(this._elementRef.nativeElement, 'focus')
        .pipe(takeUntilDestroyed())
        .subscribe(() => {
            this._parent.setActiveItem(this.id);
        });
}

父组件：

public setActiveItem(id: number) {
    this._keyManager?.setActiveItem(id);
}