Angular Material - 折叠 Stepper 的非活动步骤

Question

我有一个来自@Angular/Material 的步进器，它看起来很棒。但是，我看到许多仅打开当前步骤的示例。我想要这个功能。应关闭所有非活动步骤。

[编辑]：刚刚添加到 HTML 和 TS 文件中。

组件 HTML 文件

<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
   <mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
      <mat-tab label="Login">
         <form>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Username">
            </mat-form-field>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Password">
            </mat-form-field>
         </form>
         <button class="sameWidth" mat-raised-button color="primary">Login</button>
         <button class="sameWidth" mat-button color="primary">Forgot Password?</button>
      </mat-tab>
      <mat-tab label="Register">
         <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         <mat-vertical-stepper [linear]=true>
            <mat-step [stepControl]="firstFormGroup">
               <form [formGroup]="firstFormGroup">
                  <ng-template matStepLabel>Fill out your name</ng-template>
                  <mat-form-field>
                     <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                  </mat-form-field>
                  <div>
                     <button mat-button matStepperNext>Next</button>
                  </div>
               </form>
            </mat-step>
            <mat-step [active]="true" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
               <ng-template matStepLabel>Fill out your address</ng-template>
               <mat-form-field>
                  <input matInput placeholder="Address" formControlName="secondCtrl" required>
               </mat-form-field>
               <div>
                  <button mat-button matStepperPrevious>Back</button>
                  <button mat-button matStepperNext>Next</button>
               </div>
            </form>
            </mat-step>
            <mat-step>
               <ng-template matStepLabel>Done</ng-template>
               You are now done.
               <div>
                  <button mat-button matStepperPrevious>Back</button>
               </div>
            </mat-step>
         </mat-vertical-stepper>
         <!--<form>
            <table cellspacing="0">
               <tr>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="First Name">
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="Last name">
                     </mat-form-field>
                  </td>
               </tr>
            </table>
            <mat-form-field style="width:100%;">
               <input matInput  placeholder="Password">
            </mat-form-field>
            </form>-->
         <mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
         <button class="sameWidth" mat-raised-button color="primary">Register</button>
      </mat-tab>
   </mat-tab-group>
</mat-card-content>

组件 TS 文件

import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
    MatIconRegistry,
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: "app-login",
    templateUrl: "login.component.html",
    styleUrls: ["login.component.css"]
})
export class LoginComponent {
    animal: string;
    name: string;

    constructor(
        private _formBuilder: FormBuilder,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer,
        public dialog: MatDialog
    ) {
        iconRegistry.addSvgIcon(
            "close",
            sanitizer.bypassSecurityTrustResourceUrl(
                "assets/icons/ic_close_48px.svg"
            )
        );
    }

    openDialog(): void {
        let dialogRef = this.dialog.open(LoginDialogComponent, {
            width: "400px",
            data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log("The dialog was closed");
            this.animal = result;
        });
    }
}
@Component({
    selector: "dialog-login",
    templateUrl: "loginDialog.component.html",
    styleUrls: ["loginDialog.component.css"]
})
export class LoginDialogComponent {
    constructor(
        private _formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<LoginDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

    ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
            firstCtrl: ["", Validators.required]
        });
        this.secondFormGroup = this._formBuilder.group({
            secondCtrl: ["", Validators.required]
        });
    }
}

我目前的状态：

我的目标：

Answer 1

目前还没有官方修复。我已经提交了一份错误报告，正在调查中。目前，我已经研究并找到了解决此问题的方法。我必须将(selectionChange)="cambiaStep($event)" 作为属性添加到我的<mat-vertical-stepper> 标签中。然后我必须在我所有的<mat-step> 标签下添加一个<ng-container>。在每个对应的<ng-container> 中，我必须根据它在步进器顺序中的位置设置一个属性。在每个<ng-container> 中，我必须添加*ngIf="stepIndex === 0"，但0 是基于其在步骤中的顺序（0：第一，1：第二，2：第三等）

我的步进器最终得到了这样的代码：

<mat-vertical-stepper (selectionChange)="cambiaStep($event)">
<mat-step>
    <ng-container *ngIf="stepIndex === 0">

    </ng-container>
</mat-step>
<mat-step>
    <ng-container *ngIf="stepIndex === 1">

    </ng-container>
</mat-step>
<mat-step >
    <ng-container *ngIf="stepIndex === 2">

    </ng-container>
</mat-step>
</mat-vertical-stepper>

我还必须在组件的 *.ts 文件中添加事件函数。

export class LoginDialogComponent {
    stepIndex: number = 0;
    cambiaStep(e) {
        this.stepIndex = e.selectedIndex;
    }

    constructor() {}
}

Answer 2

我只是将您的代码复制粘贴到默认的 angular-material stepper 代码中，它就像您的目标一样显示

https://stackblitz.com/edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html

编辑

对我来说，这似乎是有角的材料错误。

如果步进器被放在标签之外，它正在工作，但在标签内，虽然aria-expanded="false" 用于非活动步骤，材料不会添加style="height: 0px; visibility: hidden;" 以隐藏非活动步骤。

您可以记录与角度材料 2 HERE相关的问题