StopPropagation в Mat-Menu за исключением определенного события щелчка - Angular - PullRequest
Новая
       26

StopPropagation в Mat-Menu за исключением определенного события щелчка - Angular

2 голосов
/ 09 июля 2019

Я реализовал угловое приложение (@latest version), в моей реализации я использовал 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 только для кнопки " Apply ".

1 Ответ

0 голосов
/ 09 июля 2019

Удалите 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>
...