Mat-Menu上的StopPropagation，但某些单击事件除外-Angular

Question

我实现了一个有角度的应用程序（@latest版本），在实现中，我使用了一个菜单菜单来显示一些自定义组件，其中包含一些自定义选项以及一个应用按钮。 默认情况下，如果我们在菜单弹出窗口中单击任何按钮，它将立即关闭。 因此，我在自定义组件上添加了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退出。

Answer 1

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