Tôi có thể lập trình di chuyển các bước của một bước-ngang-stepper trong Angular/Angular Material

Question

Tôi có một câu hỏi liên quan đến vật liệu góc (với Angular 4+). Nói trong mẫu thành phần của tôi, tôi thêm một thành phần <mat-horizontal-stepper> và trong mỗi bước <mat-step> Tôi có các nút bước để điều hướng thành phần. Giống như rất ...

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

Bây giờ tôi tự hỏi nếu nó có thể loại bỏ các nút ra khỏi từng bước và có họ ở đâu đó trong <mat-horizontal-stepper> ở một vị trí tĩnh hoặc thậm chí bên ngoài <mat-horizontal-stepper> và tôi có thể điều hướng ngược lại chuyển tiếp sử dụng mã trong tệp bản ghi thành phần của tôi. Để đưa ra một ý tưởng, tôi muốn HTML của tôi có một cái gì đó như thế này

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

Tôi hiện đang điều tra này, nhưng đôi khi câu trả lời có thể đến nhanh hơn mẫu của tôi, cảm ơn nhiều trước để được tư vấn, liên kết, câu trả lời, vv ..

Answer 1

Có. Có thể nhảy đến một bước cụ thể bằng cách sử dụng thuộc tính selectedIndex của MatStepper. Ngoài ra, MatStepper hiển thị các phương thức công khai next() và previous(). Bạn có thể sử dụng chúng để di chuyển qua lại.

Trong mẫu của bạn:

Thêm một id để bước của bạn ví dụ #stepper. Sau đó, trong goBack() và goForward() bạn phương pháp, vượt qua id bước:

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

.. và trong nguyên cảo của bạn:

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

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

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

Liên kết đến stackblitz demo.

Bạn có thể bật/tắt các nút Back và Next bằng cách sử dụng như sau:

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

Answer 2

Ngoài câu trả lời @Faisal 's, đây là quan điểm của tôi về làm cho nhảy MatStepper mà không cần phải vượt qua bước trong các đối số.

Điều này rất hữu ích khi bạn cần linh hoạt hơn trong việc thao tác các bước, ví dụ: từ một số Service hoặc thứ khác.

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

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

Đây là stackblitz demo.