如何防止角材料垫菜单关闭？

小开

最佳答案

只需将 (click) = "$event.stopPropagation()"添加到这些日历的父元素中,

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" (click)="$event.stopPropagation();">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>

Stackblitz demo .

小开

通过返回上一个解决方案，在方法中封装指令允许不关闭菜单并继续执行指令

HTML 格式:

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" (click)="doSomething($event);">
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" (click)="doSomething($event)">
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>

在 TS:

doSomething($event:any){
$event.stopPropagation();
//Another instructions
}

小开

您可以直接在组件中使用此指令。

以超文本标示语言(HTML)

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
<div fxLayout="row">
<div fxLayout="column" mat-filter-item>
<b>From</b>
<mat-calendar></mat-calendar>
</div>
<div fxLayout="column" mat-filter-item >
<b>To</b>
<mat-calendar></mat-calendar>
</div>
</div>
</mat-menu>

保存为 filter.directive.ts 从“@angle/core”导入{ Directive，HostListener，HostBinding } ;

@Directive({
selector: "[mat-filter-item]"
})
export class FilterItemDirective {
@HostListener("click", ["$event"])
onClick(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();


return false;
}
}

小开

不幸的是，以上的答案对我都不起作用。如果你需要的菜单面板比内容更宽，没有地方你可以把 "$event.stopPropagation();"，所以如果你点击垫菜单面板它将关闭。幸运的是，仍然有办法避免这一点，通过“覆盖”click事件的 MatMenu。这里有一个 stackblitz 的例子，感谢我的同事: < a href = “ https://stackblitz.com/edit/mat-menu-ability-close”rel = “ nofollow norefrer”> https://stackblitz.com/edit/mat-menu-disable-close

ngAfterViewInit() {
// Inject our custom logic of menu close
(this.searchMenu as any).closed = this.searchMenu.close = this.configureMenuClose(this.searchMenu.close);
}


private configureMenuClose(old: MatMenu['close']): MatMenu['close'] {
const upd = new EventEmitter();
feed(upd.pipe(
filter(event => {
if (event === 'click') {
// Ignore clicks inside the menu
return false;
}
return true;
}),
), old);
return upd;
}
}
function feed<T>(from: Observable<T>, to: Subject<T>): Subscription {
return from.subscribe(
data => to.next(data),
err => to.error(err),
() => to.complete(),
);
}

这样，它将关闭，只有当你点击外面(这是一个很容易删除) ，如果你使用触发器。这就是我想在我的项目的行为，我希望它将有用的人。

小开

如果你想停止关闭垫菜单，甚至点击垫菜单-内容，我做了黑客作为补充 $event.stopPropogation()锚标签，而不是垫菜单。因此，菜单日志将不会关闭，即使单击窗体上的任何地方。

Example:-
<mat-menu #nameAndDescriptioContextMenu="matMenu" [hasBackdrop]="false">
<a (click)="$event.stopPropagation();$event.preventDefault();">
<div>
Form Group Form
</div>
</a>
</mat-menu>

小开

你有很多选择，我邀请你尝试以下方法

    <mat-menu [hasBackdrop]="false">
<div  (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
...
</div>
</mat-menu>

如果你想防止关闭垫子菜单时点击框外的任何地方，否则删除它的 [ hasBackdrop ] = “ false”

小开

尝试这种方法，在 div 中包装所有的 mat 菜单项，并停止传播任何单击事件。

<mat-menu #menu="matMenu" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Origin</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</div>
</mat-menu>