Открыть закрыть панель по Id материалу гармошки - PullRequest
Новая
       27

Открыть закрыть панель по Id материалу гармошки

0 голосов
/ 01 января 2019

Могу ли я управлять, следовательно, открывать / закрывать отдельные панели с помощью назначенного идентификатора, используя гармошку, https://material.angular.io/components/expansion/overview#accordion.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Хорошо, поэтому я попробовал другое решение, StackBlitz ЗДЕСЬ .

На этот раз мне удалось использовать идентификатор для управления панелью.Здесь я использую уникальный идентификатор на каждой панели расширения матов (#first для панели_1, #second для панели_2, ...).

<mat-accordion multi="true">
  <mat-expansion-panel #first></mat-expansion-panel>
  <mat-expansion-panel #second></mat-expansion-panel>
  <mat-expansion-panel #third></mat-expansion-panel>
</mat-accordion>

Я также использовал кнопки для управления этими панелями, не взаимодействуя с ними. 

<button mat-raised-button (click)="changeState1()">ON/OFF Panel_1</button>
<button mat-raised-button (click)="changeState2()">ON/OFF Panel_2</button>
<button mat-raised-button (click)="changeState3()">ON/OFF Panel_3</button>

В вашем коде TypeScript вы используете @ViewChild для получения идентификатора панели, чтобы вы могли управлять им. 

@ViewChild('first') first: MatExpansionPanel;
@ViewChild('second') second: MatExpansionPanel;
@ViewChild('third') third: MatExpansionPanel;

Затем я создал функции для открытия одной из них, чтобы закрыть панель расширения матов в соответствии с ее идентификатором и в соответствии с ее состоянием. 

changeState1() {
  if(this.first.expanded){
    this.first.close();
  } else {
    this.first.open();
  }
}

changeState2() {...}

PS: <mat-accordion multi="true">позволяет открывать несколько панелей одновременно.

DEMO:

enter image description here

0 голосов
/ 22 января 2019

Хорошо, я попробовал решение, StackBlitz ЗДЕСЬ .

Я не нашел способа использовать идентификатор для управления панелью, но вы можете использовать переменную.Здесь я использую activePanel, которая принимает значение в зависимости от события (1 для button_1, 2 для button_2, ...). 

<button mat-raised-button (click)="activePanel = 1">Open 1</button>
<button mat-raised-button (click)="activePanel = 2">Open 2</button>
<button mat-raised-button (click)="activePanel = 3">Open 3</button>

На вашей панели вы используете функцию ngOnChanges, которая открываетпанель в соответствии с вашей переменной. 

ngOnChanges() {
    if(this.panelState2 == 2) {this.panelState = true;}
    else {this.panelState = false;}
}

Переменная panelState является логическим значением для открытия или закрытия панели с помощью [расширенного]. 

<mat-expansion-panel [expanded]="panelState">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Title Panel
    </mat-panel-title>
  </mat-expansion-panel-header>
  <p>Accedat huc suavitas quaedam oportet sermonum atque morum,...</p>
</mat-expansion-panel>

Надеюсь, это поможет вам.

ДЕМО:

enter image description here

...