Question

我正在使用ngbDropdown和自动关闭功能。当我单击不同的下拉按钮时，使用非键盘导航的下拉菜单将正确关闭。使用键盘，我可以按Tab键并按Enter键，然后出现下拉菜单。当我跳到另一个下拉菜单并按Enter时，上一个菜单不会消失，导致出现2个可见的下拉菜单。键盘导航不支持自动关闭吗？这是一个小例子：https://stackblitz.com/edit/angular-xg5veq-zbtuys

谢谢！

Answer 1

我们开发了一种变通方法，当您使用键盘导航下拉列表时，它会关闭它。

此解决方法需要为每个组件生成一个uid。

...
import { v4 as uuidv4 } from "uuid";

@Component({
selector: "app-flyout-component",
templateUrl: "./flyout-component.component.html",
styleUrls: ["./flyout-component.component.css"],
providers: [NgbDropdownConfig]
})
export class FlyoutComponentComponent implements OnInit {

@ViewChild("drop", { static: false }) drop: any;
initDone = false;
uid: string;

constructor(ngbDropdownConfig: NgbDropdownConfig) {
this.uid = this.$generateUUID();
}

uid用于标识单击了哪个ngbDropdownToggle按钮。在点击处理程序中，我们将焦点设置为下拉菜单中的第一项。

该解决方法还具有focuslost事件处理程序，该选项卡在关闭选项卡时将关闭下拉列表。

该代码位于原始的堆栈https://stackblitz.com/edit/angular-xg5veq-zbtuys中

使用键盘导航自动关闭ngbDropdown

1 个答案: