Angular/Angular Material에서 매트 수평 스텝의 스텝을 프로그래밍 방식으로 이동할 수 있습니까?

Angular/Angular Material에서 매트 수평 스텝의 스텝을 프로그래밍 방식으로 이동할 수 있습니까?

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>

예. 를 사용하여 특정 스테퍼로 점프할 수 있습니다.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();
}

스택 블리츠 데모에 대한 링크.

---

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

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

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

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

이 경우 구성 요소의 html에 있는 메소드에서 스테퍼 참조를 전달할 필요가 없습니다.ViewChild를 사용한 데모 링크

---

설정/해제할 수 있습니다.Back그리고.Next다음을 사용하여 버튼을 클릭합니다.

<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>

@Faisal의 답변 외에도, 이것은 논쟁에서 스테퍼를 통과시킬 필요 없이 매트 스테퍼를 점프하게 하는 것에 대한 저의 견해입니다.

이것은 스텝퍼를 조작하는 데 있어 더 많은 유연성이 필요할 때 도움이 됩니다. 예를 들어,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;
}

여기 스택블리츠 데모가 있습니다.

선형 스테퍼를 사용하는 경우 프로그래밍 방식으로 다음 단계로 이동하려면 다음 단계를 수행합니다.

• 작성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파일 초기화isThisStepDone거짓으로:isThisStepDone: boolean = false;

• 그런 다음 다음 NEXT STEP 버튼에 대한 방법을 씁니다.next():

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

참고: isThisStepDone을 통한 상태 전파로 인해 비동기 부분()setTimeout()이 필요합니다.

하위 구성요소 내부에 있는 경우 스테퍼를 주입할 수 있습니다.

MyMainPageWithStepper.html (simplified)

<mat-horizontal-stepper>
  <mat-step label="Upload">
    <my-component></my-component>
  </mat-step>
</mat-horizontal-stepper>

MyComponent.ts

constructor(private readonly _stepper: CdkStepper}{}

someFunction(): void {
   this._stepper.next();
}

선택한 항목을 사용하여 스테퍼의 실제 인덱스를 지정하여 이 작업을 수행할 수도 있습니다.색인.

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

구현한 솔루션은 이전 단계의 유효성 검사를 허용합니다(유효성 검사 점을 채웁니다.

  ngAfterViewInit() {
        if(this.isDone) {
          this.stepper.selectedIndex = 0;
          this.stepper.linear = false;
    
          // remove the validation // which makes the next call to the next method validate the step. warning => the validation should be readded.
          this.firstFormGroup = this._formBuilder.group({
            email: ['',],
            password:['',]
          });
    
          this.stepper.next();
          
          this.secondFormGroup = this._formBuilder.group({
            pricingYear: ['',],
            pricingMontly: ['',],
          });
          this.stepper.next();
    
          setTimeout(() => {
            this.stepper.linear = true;
         });
        }
      }

언급URL : https://stackoverflow.com/questions/46469233/can-i-programmatically-move-the-steps-of-a-mat-horizontal-stepper-in-angular-a