Question

我刚刚开始研究具有材料设计的Angular 4项目。

我目前正在使用扩展组件the API states，禁用的扩展程序面板无法由用户切换，但仍可以通过编程方式进行操作。但是，我不知道如何以编程方式切换面板。

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

Answer 1

expanded设置为true以展开展开面板，并设置为false以关闭展开面板。在以下示例中，展开和关闭扩展面板。 Please refer this link

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

面板阵列的简单实现

new BrowserWindow({
  width: 300, 
  height: 400, 
  resizable: false, 
  fullscreenable: false
});

在代码中

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

Answer 3

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

Answer 4

您可以设置一个变量，在这种情况下，我使用“ isExpanded”，然后使用它来打开和关闭设置布尔值。

def self.search(key)

如果要通过集成的太极按钮使用它，则必须使用mat-expansion-panel中的“（已打开）”和“（已关闭）”钩子更新“ isExpanded”变量。

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

Answer 5

以编程方式处理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 6

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

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();
  }
}

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

6 个答案: