Переопределить функциональность по умолчанию в заголовке панели расширения углового материала - PullRequest
Новая
       15

Переопределить функциональность по умолчанию в заголовке панели расширения углового материала

0 голосов
/ 03 декабря 2018

Я пытаюсь переопределить стандартное свертывание и расширить функциональность панели расширения угловых материалов.
https://material.angular.io/components/expansion/overview

По умолчанию панель расширения переключает разворачивание / свертывание, если мышьщелкнул ВСЕГДА в заголовке панели.

Я бы хотел отключить эту функцию, чтобы я мог добавить настраиваемые кнопки "панели инструментов" в заголовок.

Я попытался добавить обработчик события click в заголовок панели и вызвать: 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();
}
}

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Что-то вроде следующего должно делать то, что вам нужно.

использовать атрибут hideToggle в mat-expansion-panel

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

Pass 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
}

Stackblitz

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

0 голосов
/ 04 декабря 2018

Вы можете добавить [disabled]="true", чтобы отключить функцию по умолчанию.Если это то, что вы спрашиваете

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

Вы можете отключить панель расширения матов с флагом [disabled]="true" и управлять функциями расширения / свертывания извне, как показано настекЯ просто использовал случайные кнопки и переменные, которые уже были доступны, но вы поняли ...

...