角材料展开面板，仅在单击按钮时展开 [英] Angular Material Expansion panel, expand only on button click

问题描述

默认情况下，当用户单击标题中的任意位置时，Angular展开面板将展开.但是，我想更新此功能，以便只有右侧箭头按钮才能触发扩展事件.有人可以帮助我实现这一目标吗?下面是一个示例代码. https://stackblitz.com/edit/angular-exp-panel-click

By default Angular expansion panel expands when user clicks anywhere in the title. However I want to update this functionality so that only right side arrow button should trigger an expansion event. Can someone help me for achieving this? Below is a sample code. 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>

手风琴手风琴外部的按钮可以正确地扩展所需的面板，但是在标题中添加相同按钮的按钮无法正常工作.

Buttons outside mat-accordion are properly expanding desired panels, however same buttons when added inside title are not working as expected.

推荐答案

您可以:

1. 完全删除 click 事件处理程序.之所以起作用，是因为该按钮捕获了鼠标单击，而面板的其余部分却没有，因为它具有 pointer-events:none 样式属性.然后，点击事件会传播到面板上，从而切换展开状态.

1. Remove the click event handler completely. This works because the button catches the mouse click, while the rest of the panel doesn't since it has the pointer-events: none style attribute. The click event is then propagated to the panel, which toggles the expansion.

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

1. 在事件处理程序中调用 $ event.stopPropagation()，以防止面板也接收到click事件，该事件会将扩展切换回其原始状态.

1. Call $event.stopPropagation() in the event handler, to prevent the panel from also receiving the click event, which would toggle the expansion back to its original state.

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

请参见此stackblitz进行演示.

这篇关于角材料展开面板，仅在单击按钮时展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！