如何以编程方式切换角度材料扩展面板

Question

我刚刚开始研究一个带有材料设计的Angular 4项目.

我目前正在与扩充组件的工作,该API规定是 禁用的扩展面板无法由用户触发,但仍可以编程方式进行操作.但是,我不知道如何以编程方式切换面板.

Angular中首选的模拟方法是什么？

Answer 1

expanded设置为true以展开扩展面板并设置为false以关闭扩展面板.在以下示例中,展开和关闭扩展面板.请参阅此链接

TS文件

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

/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }
}

HTML文件

<mat-accordion class="example-headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput type="number" min="1" placeholder="Age">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Destination
      </mat-panel-title>
      <mat-panel-description>
        Type the country name
        <mat-icon>map</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Country">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Day of the trip
      </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">End</button>
    </mat-action-row>
  </mat-expansion-panel>

</mat-accordion>

Answer 2

您可以设置一个变量，在本例中我使用“isExpanded”，然后使用它来打开和关闭设置布尔值。

<mat-expansion-panel
    *ngIf="advertisements.objs"
    [expanded]="isExpanded"
>
</mat-expansion-panel>

如果您想将其与集成的 Toogle 按钮一起使用，则必须使用 mat-expansion-panel 中的“（打开）”和“（关闭）”挂钩更新“isExpanded”变量。

<mat-expansion-panel
    *ngIf="advertisements.objs"
    [expanded]="isExpanded"
    (opened)="isExpanded = true"
    (closed)="isExpanded = false"
>
</mat-expansion-panel>

Answer 3

以编程方式处理 Mat Expansion 面板的另一种非常简单的方法是在 Angular 中使用本地引用

<mat-accordion>
  <mat-expansion-panel #mep="matExpansionPanel">
  </mat-expansion-panel>
</mat-accordion>

现在在 HTML（在我们使用 @ViewChild 之前无法直接在 TS 文件中访问）文件中，使用 mep 使用以下内容展开或折叠扩展面板：

<button (click)="mep.expanded = true;">Expand</button>
<button (click)="mep.expanded = false;">Collapse</button> 

Answer 4

假设您正在寻找在单击按钮时从组件触发 open() 方法的方法，这就是我从材料 API 文档中获得的内容。

import { ViewChild } from '@angular/core';
import { MatAccordion, MatExpansionPanel } from '@angular/material/expansion';
    
export class MyComponent implements OnInit {
    @ViewChild(MatExpansionPanel) pannel?: MatExpansionPanel; 
    @ViewChild(MatAccordion) accordion?: MatAccordion;
    
    constructor(){}
    
    closePannel() { // for expansion panel only
        if(!this.pannel) { return }
        this.pannel.close();
    }
    
    closeAll() { // for all panels in accordion
        if(!this.accordion) { return }
        this.accordion.closeAll();
    }
}

Answer 5

面板阵列的简单实现

<mat-expansion-panel [expanded]="indexExpanded == i" disabled="true" *ngFor="...; let i = index">
    ...
    <button (click)="togglePanels(i)">Toggle</button>
    ...
</mat-expansion-panel>

并在代码中

indexExpanded: number = -1;

togglePanels(index: number) {
    this.indexExpanded = index == this.indexExpanded ? -1 : index;
}

Answer 6

app.component.html：

    <button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button>
    <p>
    <mat-expansion-panel [(expanded)]="xpandStatus">
      <mat-expansion-panel-header>
        <mat-panel-title>This an expansion panel</mat-panel-title>
        <mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description>
      </mat-expansion-panel-header>
      Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.
    </mat-expansion-panel>
    </p>

app.component.ts

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

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

这里是 StackBlitz 中的直播：https ://stackblitz.com/edit/angular-gtsqg8