Question

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

Answer 1

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

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

1 个答案: