[英]Angular 6 - click outside menu
我正在创建一个点击事件来记录关闭我的侧边菜单,我在 jquery 中创建了示例,但我不想在 jquery 中执行此操作,并且无法访问“菜单”变量。
我怎么能用纯角度写这个?
import { Component, HostListener, ElementRef } from "@angular/core";
import { Router } from "../../node_modules/@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
menu: boolean;
date = new Date();
@HostListener('document:click', ['$event'])
clickout(event) {
if(this.eRef.nativeElement.contains(event.target)) {
this.menu = false;
} else {
console.log('clicked outside');
}
}
constructor(public router: Router,
private eRef: ElementRef) {}
showMenu() {
this.menu = !this.menu;
}
}
编辑我编辑了重复的代码,但我有不同的想法
是否还有其他 HostListener 可以忽略并使用 id 按钮? 还是我想错了?
当我点击旁边或按钮菜单时,这个点击事件一定不起作用,当我点击其他任何地方时,它应该将 this.menu 设置为 false。
<aside id="aside" [hidden]="!menu">
<button class="menu-btn" (click)="menu = false" routerLink="/">Strona Główna</button>
<button (click)="menu = false" routerLink="/cv">CV</button>
<button (click)="menu = false" routerLink="/bio">BIO</button>
<button (click)="menu = false" routerLink="/portfolio">Portfolio</button>
<button (click)="menu = false" routerLink="/kontakt">Kontakt</button>
</aside>
<button id="menu-btn" [class.aside]="menu" (click)="showMenu()">Klik</button>
正如此答案中所建议的,您可以使用HostListener
检测文档click
事件。 为了确保在单击菜单时鼠标单击不会到达文档,您应该在设置在aside
元素上的click
事件处理程序中停止事件的传播:
<aside [hidden]="!menu" (click)="handleAsideClick($event)">
@HostListener('document:click', ['$event']) clickout(event) {
// Click outside of the menu was detected
...
}
handleAsideClick(event: Event) {
event.stopPropagation(); // Stop the propagation to prevent reaching document
...
}
如果您只想在菜单外单击,您可以通过以下方式以编程方式触发对文档正文的单击:
document.body.click();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.