[英]StopPropagation on Mat-Menu except certain click event - Angular
I implemented an angular application (@latest version), in my implementation I used a mat-menu to show some custom component which contains some customized options along with a apply button. 我实现了一个有角度的应用程序(@latest版本),在实现中,我使用了一个菜单菜单来显示一些自定义组件,其中包含一些自定义选项以及一个应用按钮。 By default, if we do any click in the menu popover screen immediately it will close.
默认情况下,如果我们在菜单弹出窗口中单击任何按钮,它将立即关闭。 So I added a
stopPropagation
on my custom component to prevent closing popover action. 因此,我在自定义组件上添加了
stopPropagation
,以防止关闭弹出操作。
But I need to close the menu pop-over on apply button click event. 但是我需要在应用按钮单击事件时关闭菜单弹出窗口。 But its failing because the
stopPropagation
in the parent level prevents the button close action. 但是它失败了,因为父级中的
stopPropagation
阻止了按钮关闭动作。
How to escape from stopPropagation
only for the specified button. 如何仅对指定按钮从
stopPropagation
转义。
Stackblitz URL: https://stackblitz.com/edit/angular-mat-menu-stop-propagation?embed=1 Stackblitz网址: https ://stackblitz.com/edit/angular-mat-menu-stop-propagation ? embed = 1
File: app.component.html 档案:app.component.html
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<menu-toolbar (click)="$event.stopPropagation()"></menu-toolbar>
</mat-menu>
File: menu-toolbar.component.ts 文件:menu-toolbar.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'menu-toolbar',
templateUrl: './menu-toolbar.component.html',
styleUrls: [ './menu-toolbar.component.css' ]
})
export class MenuToolbarComponent {
name = 'Angular';
applyChanges(): void {
// some actions done
console.log('Changes applied successfully...');
}
}
File: menu-toolbar.component.html 文件:menu-toolbar.component.html
<div>
<mat-checkbox>Item #1</mat-checkbox>
<mat-checkbox>Item #2</mat-checkbox>
<mat-checkbox>Item #3</mat-checkbox>
</div>
<button mat-button (click)="applyChanges($event)">Apply</button>
Note: If I add the
stopPropagation
to the checkbox, it closes the pop-over if I click outside the checkbox.注意:如果我将
stopPropagation
添加到复选框,那么如果我在复选框外部单击,它将关闭弹出窗口。 So, I added in the component level.因此,我添加了组件级别。
Kindly assist me how to escape from stopPropagation
only for the " Apply " button. 请仅通过“ 应用 ”按钮帮助我如何从
stopPropagation
退出。
Remove the stopPropagation
on <menu-toolbar></menu-toolbar>
and put it on the div
like this: 删除
<menu-toolbar></menu-toolbar>
上的stopPropagation
,然后将其放在div
上,如下所示:
<div (click)="$event.stopPropagation()">
<mat-checkbox>Item #1</mat-checkbox>
<mat-checkbox>Item #2</mat-checkbox>
<mat-checkbox>Item #3</mat-checkbox>
</div>
<button mat-button (click)="applyChanges($event)">Apply</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.