我可以以编程方式在Angular / Angular材质中移动水平垫脚垫的步骤吗


85

我对Angular Material(使用Angular 4+)有疑问。说在组件模板中,我添加了一个<mat-horizontal-stepper>组件,并且在每个步骤中,<mat-step>我都有步进按钮来导航该组件。像这样

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

现在,我想知道是否可以删除每个步骤中的按钮,并将它们放置<mat-horizontal-stepper>在静态位置或什至外部的其他位置,<mat-horizontal-stepper>并且可以使用组件打字稿文件中的代码来回导航。给一个想法,我希望我的HTML是这样的

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second option -->
<div>
   <button (click)="goBack()" type="button">Back</button>
   <button (click)="goForward()" type="button">Next</button>
</div>

Answers:


173

是。通过使用的selectedIndex属性,可以跳到特定的步进器MatStepper。此外,还 MatStepper公开了公共方法next()previous()。您可以使用它们来回移动。

在您的模板中:

为您的步进器添加ID,例如#stepper。然后在goBack()goForward()方法中,传递stepper id:

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

..并在您的打字稿中:

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

链接到stackblitz演示


您还可以使用ViewChildTypeScript中对stepper组件的引用,如下所示:

@ViewChild('stepper') private myStepper: MatStepper;

goBack(){
    this.myStepper.previous();
}

goForward(){
    this.myStepper.next();
}

在这种情况下,您不必在组件html的方法中传递步进器引用。使用ViewChild链接到演示


您可以使用以下方法启用/禁用BackNext按钮:

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

8
我只是在ViewChild看我如何参考步进器-但是您击败了我!也喜欢添加了禁用/启用功能的事实!有几点!
Mike Sav

ViewChild也是获得步进的好选择。但是我更喜欢传递一个id。我还在ViewChild演示\ o /中添加了解决方案
Faisal

嗨,费萨尔(Faisal)谢谢您这么好的回答,还有一个帮助,不是传递表格到垫子步骤,我们可以传递角度分量,然后根据该分量有效,我可以遍历下一个垫子步骤,如何实现,谢谢
恩图

不错的解决方案。但是我们如何将滚动区域限制为仅步进内容而不是实际标题。如果添加内容堆,则标题将滚动到看不见的地方。由于标题指示用户在某个过程中的位置,因此无论每个步骤中的内容量如何,标题都可见是很重要的。
韦恩·里斯特尔

在这里,完成的步骤图标设置为“编辑”,当前步骤的图标设置为“数字”,我是否可以将完成的步骤图标设置为“完成(勾号)”,并且当按下后退按钮时,完成的步骤图标将更改为“编辑” .... EX:假设我完成了步骤2,然后单击下一步按钮,现在步骤2的图标显示为“ EDIT icon(pen symbol)”,现在我在步骤3中将“ Number”显示为图标....我想做的是,当从步骤2单击下一个btn时,图标应为“ DONE”,而第三步图标应为“ Number”,如果我单击第三步的btn,则第三步的图标应为“ DONE”。第二个为“编辑”。
朱朱

29

除了@ Faisal的答案之外,这是我使MatStepper跳转而无需在参数中传递步进器的观点。

当您需要更大的灵活性来操作步进器(例如从Service或其他东西)时,这将很有帮助。

HTML:

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
  <button (click)="move(0)">1st</button>
  <button (click)="move(1)">2nd</button>
  <button (click)="move(2)">3rd</button>
  <button (click)="move(3)">4th</button>
</div>

TS档案:

move(index: number) {
    this.stepper.selectedIndex = index;
}

这是stackblitz演示


21

如果要以编程方式导航到下一步,并且使用的是线性步进器,请执行以下步骤:

  • 创建一个stepper像这样的: <mat-horizontal-stepper linear #matHorizontalStepper>
  • 定义mat-step如下:<mat-step [completed]="isThisStepDone">
  • 从内部mat-step创建一个按钮,转到下一步,如下所示: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
  • .ts文件中声明一个MatStepper名为stepper的引用:
    @ViewChild('matHorizontalStepper') stepper: MatStepper;
  • 另外,在.ts文件内初始化isThisStepDonefalseisThisStepDone: boolean = false;
  • 然后为名为“ NEXT STEP”的按钮编写方法next()

    submit(stepper: MatStepper) {
     this.isThisStepDone = true;
     setTimeout(() => {           // or do some API calls/ Async events
      stepper.next();
     }, 1);
    }
    

3
setTimeout()由于通过传播状态,因此需要异步部分()isThisStepDone
尤里(Yuri)'18

2

您也可以通过使用selectedIndex指定步进器的实际索引来做到这一点。

stackblitz:https ://stackblitz.com/edit/angular-4rvy2s ? file = app%2Fstepper-overview-example.ts

HTML:

<div class="fab-nav-container">
   <mat-vertical-stepper linear="false" #stepper>
       <mat-step *ngFor="let step of stepNodes; let i = index">
           <ng-template matStepLabel>
               <p> {{step.title}} </p>
           </ng-template>
       </mat-step>
   </mat-vertical-stepper>
</div>

<div class="button-container">
   <div class="button-grp">
      <button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
      <button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
      <button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
   </div>
</div>

TS:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
    title: string;
    seq: number;
    flowId: string;
}
/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
  @ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
  @ViewChild('stepper') private myStepper: MatStepper;

  stepNodes: INodes[] = [
    { title: 'Request Submission', seq: 1, flowId: 'xasd12'}, 
    { title: 'Department Approval', seq: 2, flowId: 'erda23'}, 
    { title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'}, 
  ];

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.vert_stepper._getIndicatorType = () => 'number';
  }
  clickButton(index: number, stepper: MatStepper) {
      stepper.selectedIndex = index - 1;
  }
}

1
我只是在使用,@ViewChild('stepper') private myStepper: MatStepper;而不是this.matStepper.next();在我的功能中。正常使用
最多
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.