覆盖 Angular 材质扩展面板标题中的默认功能答案

【问题标题】：Override Default Functionality in Angular Material Expansion Panel Header覆盖 Angular 材质扩展面板标题中的默认功能
【发布时间】：2018-12-03 20:34:15
【问题描述】：

我正在尝试覆盖 Angular 材质扩展面板的默认折叠和展开功能。
https://material.angular.io/components/expansion/overview

默认情况下，如果在面板标题中单击鼠标ANYWHERE，扩展面板将切换展开/折叠。

我想取消此功能，以便将自定义“工具栏”按钮添加到标题中。

我尝试向 Panel Header 添加一个点击事件处理程序并调用：event.stopPropogation(); 以试图阻止展开和折叠无济于事。

我还尝试向面板标题添加一个带有单击事件处理程序的按钮，看看我是否可以回避展开和折叠。不幸的是，这也不起作用。

https://stackblitz.com/edit/angular-ritpbb

HTML

<mat-expansion-panel #matExpansionPanel  
    [class.active]="selected" 
    (click)="componentSelected($event)" 
    [expanded]="expanded">
    <mat-expansion-panel-header (click)="togglePanel($event)">
        Collapse Test&nbsp;&nbsp;<button mat-button>select panel</button>
    </mat-expansion-panel-header>
    CONTENT FOR EXPANSION PANEL
    <mat-action-row>
        <button mat-button (click)="buttonClick($event)">remove</button>
    </mat-action-row>
</mat-expansion-panel>

.TS

import { Component } from '@angular/core';
import { MatExpansionPanel } from '@angular/material';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    expanded = true;
    selected = false;

componentSelected($event) {
    this.selected = !this.selected;
    event.stopPropagation();
}

buttonClick($event) {
    this.selected = !this.selected;
    console.log('test');
    event.stopPropagation();
}

togglePanel($event) {
this.expanded = !this.expanded;
//event.stopPropagation();
}
}

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

以下内容应该可以满足您的需要。

在mat-expansion-panel 上使用hideToggle 属性

<mat-expansion-panel #matExpansionPanel  
  [class.active]="selected"  
  [expanded]="expanded"
  hideToggle>

将event 传递给expandPanel()

<mat-expansion-panel-header (click)="expandPanel($event)" >

获取对matExpansionPanel 的引用以在expandPanel() 中使用

@ViewChild('matExpansionPanel') _matExpansionPanel:any

expandPanel()方法

 expandPanel(event): void {
    event.stopPropagation(); // Preventing event bubbling

    if (this.expanded) {
      this._matExpansionPanel.open(); // Here's the magic
    }else{
      this._matExpansionPanel.close()
    }
  }

CSS

以下将覆盖鼠标指针

.mat-expansion-panel-header:not([aria-disabled=true]) {
    cursor: default !important;
}

button{
  cursor: pointer
}

堆栈闪电战

https://stackblitz.com/edit/angular-jztdvu?embed=1&file=src/app/app.component.ts

【讨论】：

【解决方案2】：

您可以添加[disabled]="true" 以阻止默认功能。如果这就是你要问的

Stackblitz：https://stackblitz.com/edit/angular-nmupwc

您可以使用 [disabled]="true" 标志禁用 mat-expansion-panel 并从外部控制展开/折叠功能，如 stackblitz 中所示。我只是使用了已经可用的随机按钮和变量，但你明白了..

【讨论】：

【解决方案3】：

您可以在您的操作中停止点击事件的传播：

<mat-expansion-panel *ngFor="let panel of panels">
    <mat-expansion-panel-header>
       <mat-panel-title>title</mat-panel-title>
       <mat-panel-description>
           <mat-icon (click)="edit($event)">edit</mat-icon>
       </mat-panel-description>
    </mat-expansion-panel-header>
</mat-expansion-panel>

组件功能：

  edit(event: Event) {
    event.stopPropagation();
    ... do the logic here...
  }

【讨论】：

【解决方案4】：

将内联 CSS 属性添加到 <mat-expansion-panel-header> 中，

<mat-expansion-panel-header style="pointer-event: none">
      Panel Title
</mat-expansion-panel-header>

【讨论】：