问使用键盘导航的ngbDropdown AutoClose
EN

Stack Overflow用户

提问于 2020-04-16 21:02:24

回答 1查看 215关注 0票数 0

我正在使用带有自动关闭功能的ngbDropdown。当我单击不同的下拉按钮时，使用非键盘导航的下拉菜单将被正确清除。使用键盘，我可以使用tab键并按enter键，然后出现下拉菜单。当我用tab键切换到另一个下拉菜单并按enter键时，上一个菜单不会消失，从而产生两个可见的下拉菜单。键盘导航不支持自动关闭吗？下面是一个小示例：https://stackblitz.com/edit/angular-xg5veq-zbtuys

谢谢!

angular

ng-bootstrap

回答 1

Stack Overflow用户

发布于 2020-04-23 01:28:32

我们开发了一种解决方法，可以在使用键盘导航时关闭下拉菜单。

此解决方法需要为每个组件生成一个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按钮。在click处理程序中，我们将焦点设置到下拉列表中的第一项。

该解决方法还具有一个焦点丢失事件处理程序，该处理程序在切换到下拉菜单时关闭下拉列表。

代码在原始的stackblitz https://stackblitz.com/edit/angular-xg5veq-zbtuys中

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61250892

复制

相似问题

问使用键盘导航的ngbDropdown AutoClose
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用键盘导航的ngbDropdown AutoCloseEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用键盘导航的ngbDropdown AutoClose
EN