Angular 8在菜单外单击时如何隐藏下拉菜单
提问于 2020-01-28 10:05:55
当在下拉菜单之外单击时，我想隐藏自定义下拉菜单。
我尝试了下面的代码，但即使我单击下拉菜单中的元素，它也会隐藏起来
<button class="btn btn-primary btn-sm mt-1" type="button" id="dropdownMenuButton" data-toggle="dropdown" (click)="toggle()" (blur)="toggle()" aria-haspopup="true"
aria-expanded="false">
Tools
</button>
回答 2
Stack Overflow用户
发布于 2020-01-28 10:19:03
这可以通过在窗口上创建一个事件来实现，该事件在用户单击不是dropdown/dropdown切换按钮的地方时切换连接到dropdown的布尔值，示例如下：
@ViewChild('dropdown', {static: false}) protected dropdown: ElementRef;
@ViewChild('toggledropdown', {static: false}) protected toggleDropdown: ElementRef;
...
constructor(private renderer: Renderer2, protected router: Router) {
this.renderer.listen('window', 'click', (e: Event) => {
if (e.target !== this.dropdown.nativeElement && !this.toggleDropdown.nativeElement.contains(e.target)) {
this.dropdownOpened = false;
}
});
}if语句用于确保在单击dropdown或dropdown切换元素时不会关闭dropdown。
Stack Overflow用户
发布于 2020-01-28 10:18:26
好的，(click)="toggle()“
当你点击菜单时会隐藏菜单，当你在菜单之外点击时(blur)="toggle()“会隐藏菜单。您可以决定要继续绑定到哪个操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59946295
复制相关文章
点击加载更多
腾讯云开发者
