[英]Angular 7 : close menu when click outside
我想知道每当在父 div #menu 内触发点击时,其中存在无关的 html 标签。
nativeElement.parent 对我不起作用。
HTML代码:
<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>
<div class="menu" *ngIf="isMenuOpen" #menu>
<div>
I'm the menu. Click outside to close me
</div>
</div>
角脚本:
this.renderer.listen('window', 'click',(e:Event)=>{
if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
this.isMenuOpen=false;
}
});
这是行不通的。
将主机添加到组件元标记。
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
host: {
"(window:click)": "onClick()"
}
})
停止传播()
Event 接口的 stopPropagation() 方法可防止当前事件在捕获和冒泡阶段进一步传播。
toggleMenu($event) {
$event.stopPropagation();
this.isMenuOpen = !this.isMenuOpen;
}
onClick() {
this.isMenuOpen = false;
}
您可以通过侦听文档单击事件来重置菜单状态,在这种情况下,菜单中的任何单击事件都需要运行事件stopPropagation
方法以防止文档单击方法,最后菜单组件主体中的任何单击都由您处理和任何单击事件外部菜单组件resetToggle
将运行。
stopPropagation 这会阻止文档单击处理程序运行
menuItemClickHandler(e , index ) {
e.stopPropagation();
// something magical 🧙♂️✨
...
}
@HostListener("document:click") resetToggle() {
this.isMenuOpen=false;
}
菜单组件
export class MenusComponent {
menuslist = [1, 2, 3, 4, 5, 6, 7, 8];
@HostBinding('class.active') isMenuOpen: boolean = false;
constructor() { }
menuItemClickHandler(e, index) {
e.stopPropagation();
// something magical 🧙♂️✨
console.log(index);
this.toggle(e); // toggle menus after you click 🎮
}
// component click
@HostListener('click', ['$event']) click(e) {
e.stopPropagation();
}
@HostListener("document:click") resetToggle() {
this.isMenuOpen = false;
}
toggle(e) {
e.stopPropagation();
console.log('toggle')
this.isMenuOpen = !this.isMenuOpen;
}
}
菜单组件模板
<ul ngClass="{slide : isMenuOpen}">
<li *ngFor="let item of menuslist;let index=index" (click)="menuItemClickHandler($event,index)">
{{item}}
</li>
</ul>
菜单样式将切换菜单滑动打开或关闭基于菜单是打开值
:host {
display: block;
height: 50vh;
width: 200px;
background: #ccc;
margin-left: -300px;
transition: all 0.25s ease-in-out;
}
:host.active{
margin-left: 0
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.