Панель расширения угловых материалов, разворачивается только при нажатии кнопки

Question

По умолчанию панель углового расширения раскрывается, когда пользователь щелкает в любом месте заголовка. Однако я хочу обновить эту функцию, чтобы только кнопка со стрелкой вправо вызывала событие расширения. Может ли кто-нибудь помочь мне в достижении этого? Ниже приведен пример кода. https://stackblitz.com/edit/angular-exp-panel-click

<button (click)="panel1.toggle()" mat-raised-button>Toggle panel 1</button>
<button (click)="panel2.toggle()" mat-raised-button>Toggle panel 2</button>

Кнопки вне мат-гармошки правильно расширяют нужные панели, однако те же кнопки при добавлении внутрь заголовка не работают должным образом.

Answer 1

Вы можете:

1. Полностью удалить обработчик событий click.Это работает, потому что кнопка ловит щелчок мышью, а остальная часть панели - нет, так как она имеет атрибут стиля pointer-events: none.Затем событие click распространяется на панель, которая включает расширение.

<button class="toggle-panel" mat-raised-button>

Вызовите $event.stopPropagation() в обработчике событий, чтобы запретить панели также получать событие щелчка, которое вернет расширение в исходное состояние.

<button class="toggle-panel" (click)="$event.stopPropagation(); panel2.toggle()" ... >

См. этот стек для демонстрации.