时间戳

首页 > 解决方案 > 除某些点击事件外，Mat-Menu 上的 StopPropagation - Angular

javascript - 除某些点击事件外，Mat-Menu 上的 StopPropagation - Angular

问题描述

我实现了一个角度应用程序（@latest 版本），在我的实现中，我使用了一个 mat-menu 来显示一些自定义组件，其中包含一些自定义选项以及一个应用按钮。默认情况下，如果我们立即在菜单弹出屏幕中单击，它将关闭。所以我stopPropagation在我的自定义组件上添加了一个以防止关闭弹出操作。

但是我需要在应用按钮单击事件时关闭菜单弹出窗口。但它失败了，因为stopPropagation在父级别阻止按钮关闭操作。

如何stopPropagation仅针对指定按钮进行转义。

Stackblitz URL：https ://stackblitz.com/edit/angular-mat-menu-stop-propagation?embed=1

文件：app.component.html

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <menu-toolbar  (click)="$event.stopPropagation()"></menu-toolbar>
</mat-menu>

文件：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...');
  }
}

文件：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>

注意：如果我添加stopPropagation到复选框，如果我单击复选框外部，它会关闭弹出窗口。所以，我在组件级别添加了。

请帮助我如何摆脱stopPropagation“应用”按钮。

标签： javascriptangularangular-materialstoppropagation

解决方案

取下stopPropagation打开 <menu-toolbar></menu-toolbar> 并像这样戴上它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>

推荐阅读