angular2 router title




각도/각도 재질로 매트 수평 스 태퍼의 단계를 프로그래밍 방식으로 이동할 수 있습니까? (2)

Angular Material (각도 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>

@ 의 답변 외에도, 이것은 인수에서 스테퍼를 통과 할 필요없이 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 데모가 있습니다.


예. MatStepper selectedIndex 속성을 사용하여 특정 스테퍼로 MatStepper 있습니다. 또한 MatStepper 는 public 메소드 next()previous() 노출합니다. 그것들을 사용하여 앞뒤로 움직일 수 있습니다.

템플릿에서

#stepper 와 같이 스테퍼에 ID를 추가하십시오. 그런 다음 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';

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

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

stackblitz 데모에 링크하십시오.

Next 사용하여 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>