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>