Angular / Angular Material에서 mat-horizontal-stepper의 단계를 프로그래밍 방식으로 이동할 수 있습니까?


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>

답변:


173

예. 의 selectedIndex속성을 사용하여 특정 스테퍼로 이동할 수 MatStepper있습니다. 또한 MatStepper공용 메서드 next()previous(). 그것들을 사용하여 앞뒤로 이동할 수 있습니다.

템플릿에서 :

스테퍼에 ID를 추가하십시오 #stepper. 그런 다음 goBack()goForward()메소드에서 스테퍼 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 데모 링크 .


ViewChild아래와 같이 TypeScript의 스테퍼 구성 요소에 대한 참조를 가져 오는 데 사용할 수도 있습니다 .

@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스테퍼를 얻기위한 좋은 옵션이기도합니다. 그러나 나는 이드를 전달하는 것을 선호합니다. 또한 ViewChild데모 에 솔루션을 추가 했습니다. \ o /
Faisal

Hi Faisal 감사합니다. 양식을 매트 단계에 전달하는 대신 각도 구성 요소를 전달한 다음 해당 구성 요소가 유효한지 여부에 따라 다음 매트 단계로 이동할 수 있습니까? , 감사합니다
Enthu

좋은 솔루션입니다. 하지만 어떻게 스크롤 영역을 실제 헤더가 아닌 스테퍼의 내용으로 제한 할 수 있습니까? 많은 콘텐츠를 추가하면 헤더가 보이지 않게 스크롤됩니다. 헤더는 사용자가 어떤 프로세스에 있는지를 나타 내기 때문에 각 단계의 콘텐츠 양에 관계없이 헤더가 표시되는 것이 중요합니다.
Wayne Riesterer 2018 년

여기서 완료된 단계 아이콘은 "편집"으로 설정되고 현재 단계 아이콘은 "숫자"로 설정되어 있습니다. 완료된 단계 아이콘을 "완료 (틱)"로 설정하고 뒤로 버튼을 누르면 완료된 단계 아이콘이 "편집"으로 변경됩니다. .... EX : 2 단계를 완료하고 다음 버튼을 클릭했다고 가정합니다. 이제 2 단계의 아이콘이 "편집 아이콘 (펜 기호)"으로 표시되고 이제 "숫자"를 아이콘으로 표시하는 3 단계에 있습니다 .... What 2 단계에서 다음 btn을 클릭하면 아이콘은 "DONE"이고 3 단계 아이콘은 "Number"여야합니다. 3 단계의 btn을 뒤로 클릭하면 3 단계의 아이콘은 "DONE"이어야합니다. "편집하다".
Zhu

29

@ Faisal 의 답변 외에도 인수에 스테퍼를 전달할 필요없이 MatStepper 점프를 만드는 데 대한 나의 견해입니다.

예를 들어 a 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참조라는 이름의 스테퍼를 :
    @ViewChild('matHorizontalStepper') stepper: MatStepper;
  • 또한 .ts 파일 false로 초기화 isThisStepDone합니다 .isThisStepDone: 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

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();있습니다. 완벽하게 작동
Max
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.