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

【问题标题】：StopPropagation on Mat-Menu except certain click event - Angular除某些点击事件外，Mat-Menu 上的 StopPropagation - Angular
【发布时间】：2019-11-18 14:53:29
【问题描述】：

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

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

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

Stackblitz 网址：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 仅用于“应用”按钮。

【问题讨论】：

在父级点击外部使用 stopPropagation 的事件关闭菜单！？
@FatemeFazli - 如果在菜单弹出框之外单击，它将关闭并且没有问题。如果我们在作为菜单加载的自定义组件内部单击，它不应该关闭，只有在单击应用按钮后才会关闭。

标签： javascript angular angular-material stoppropagation

【解决方案1】：

删除stopPropagation on <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>

【讨论】：

如果您在按钮和复选框 div 区域之外单击，它将关闭弹出窗口。
我从documentation 了解到，无法阻止默认行为并禁止关闭或显式调用 close 方法。这将是我很好的功能请求。