Angular Material Expansion 面板，僅在單擊按鈕時展開

Question

默認情況下，當用戶單擊標題中的任意位置時，Angular 擴展面板會展開。 但是我想更新此功能，以便只有右側箭頭按鈕才能觸發擴展事件。 有人可以幫助我實現這一目標嗎？ 下面是一個示例代碼。 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>

mat-accordion 外部的按鈕正在正確擴展所需的面板，但是在標題中添加的相同按鈕無法按預期工作。

Answer 1

您可以：

1. 完全刪除click事件處理程序。 這是有效的，因為按鈕捕獲鼠標單擊，而面板的其余部分沒有，因為它具有pointer-events: none樣式屬性。 然后將單擊事件傳播到面板，從而切換展開。

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

2. 在事件處理程序中調用$event.stopPropagation() ，以防止面板也接收單擊事件，這會將擴展切換回其原始狀態。

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

有關演示，請參閱此 stackblitz 。