Tôi có thể lập trình di chuyển các bước của bước theo chiều ngang trong Vật liệu Góc / Góc không

85

Tôi có một câu hỏi liên quan đến Angular Material (với Angular 4+). Giả sử trong mẫu thành phần của tôi, tôi thêm một <mat-horizontal-stepper>thành phần 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. Như vậy ...

<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 đang tự hỏi liệu có thể loại bỏ các nút ra khỏi mỗi bước và đặt chúng ở nơi khác ở <mat-horizontal-stepper>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 và chuyển tiếp bằng cách sử dụng mã trong tệp bảng chữ thành phần của mình hay không. Để đưa ra ý tưởng, tôi muốn HTML của mình giống 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>
angular  angular-material  angular-material2 
— Mike Sav
nguồn

Câu trả lời:

173

Đúng. Có thể chuyển đến một bước cụ thể bằng cách sử dụng selectedIndexthuộc tính của MatStepper. Ngoài ra, MatStepperhiển thị các phương pháp 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 vào ví dụ: bước của bạn #stepper. Sau đó, trong phương thức goBack()và của bạn goForward(), hãy chuyển 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 bảng chữ của bạn: 

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

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

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

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

Bạn cũng có thể sử dụng ViewChildđể tham chiếu đến thành phần bước trong TypeScript của mình như hình dưới đây:

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

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

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

Trong trường hợp này, bạn không phải chuyển tham chiếu bước vào phương thức trong html của thành phần của bạn. Liên kết đến Demo với ViewChild

Bạn có thể bật / tắt các nút Backvà Nextbằng cách sử dụng các cách 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>
— Faisal
nguồn
8
Tôi chỉ đang xem xét ViewChildvà xem làm thế nào tôi có thể tham chiếu bước - nhưng bạn đã đánh bại tôi về nó! Thích thực tế là bạn cũng đã thêm chức năng tắt / bật! Có một số điểm!
— Mike Sav
ViewChildcũng là một lựa chọn tốt để có được bước. Nhưng tôi muốn chuyển một id hơn. Tôi cũng đã thêm ViewChildgiải pháp trong bản demo \ o /
— Faisal
Xin chào Faisal, cảm ơn vì câu trả lời tuyệt vời như vậy, một sự trợ giúp nữa, thay vì chuyển một biểu mẫu đến bước thuần thục, chúng ta có thể chuyển các thành phần góc và sau đó tùy thuộc vào thành phần đó hợp lệ, tôi có thể chuyển sang bước tiếp theo không, làm cách nào để đạt được điều đó , thankyou
— Enthu
Giải pháp tốt. Nhưng làm thế nào chúng ta có thể giới hạn vùng cuộn chỉ với nội dung của bước chứ không phải tiêu đề thực. Nếu bạn thêm một đống nội dung, thì tiêu đề sẽ cuộn ra ngoài tầm nhìn. Vì tiêu đề cho biết người dùng đang ở đâu trong một số quá trình, nên điều quan trọng là tiêu đề phải hiển thị bất kể số lượng nội dung trong mỗi bước.
— Wayne Riesterer
Ở đây, biểu tượng các bước đã hoàn thành được đặt thành "CHỈNH SỬA" và biểu tượng các bước hiện tại được đặt thành "SỐ" Tôi có thể đặt biểu tượng các bước đã hoàn thành là "XONG (đánh dấu)" và khi nhấn nút quay lại, biểu tượng bước đã hoàn thành chuyển thành "Chỉnh sửa" .... VÍ DỤ: giả sử tôi đã hoàn thành bước 2 và nhấp vào nút tiếp theo bây giờ biểu tượng của bước 2 hiển thị là "EDIT icon (biểu tượng bút)" và bây giờ tôi đang ở bước 3 hiển thị "Number" dưới dạng biểu tượng .... Cái gì Tôi muốn làm là Khi nhấp vào btn tiếp theo từ bước 2, biểu tượng phải là "XONG" và biểu tượng bước thứ 3 phải là "Số", nếu tôi nhấp lại btn của bước thứ 3 thì biểu tượng của bước thứ 3 sẽ là "XONG" thứ 2 là "BIÊN TẬP".
— Zhu
29

Ngoài câu trả lời của @ Faisal , đây là công việc của tôi về việc thực hiện bước nhảy của MatStepper mà không cần chuyển 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 điều khiển bước, ví dụ: từ một Servicehoặc một cái gì đó 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>

Tệp TS:

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

Đây là bản demo stackblitz .

— Altus
nguồn
21

Nếu bạn muốn điều hướng theo chương trình đến bước tiếp theo và nếu bạn đang sử dụng bước tuyến tính , hãy làm theo các bước sau:

  • Tạo một cái steppernhư thế này: <mat-horizontal-stepper linear #matHorizontalStepper>
  • Xác định mat-stepnhư thế này:<mat-step [completed]="isThisStepDone">
  • Từ bên trong, mat-steptạo một nút để chuyển sang bước tiếp theo như sau: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
  • Trong .tstệp khai báo một MatSteppertham chiếu có tên là bước :
    @ViewChild('matHorizontalStepper') stepper: MatStepper;
  • Ngoài ra, trong .tstệp khởi tạo isThisStepDonelà false :isThisStepDone: boolean = false;

  • Sau đó viết phương thức cho nút BƯỚC TIẾP THEO có tên next(): 

    submit(stepper: MatStepper) {
 this.isThisStepDone = true;
 setTimeout(() => {           // or do some API calls/ Async events
  stepper.next();
 }, 1);
}
— Da đen
nguồn
3
Phần async ( setTimeout()) là bắt buộc do sự lan truyền trạng thái qua isThisStepDone.
— Yuri,
2

Bạn cũng có thể làm điều đó bằng cách chỉ định chỉ mục thực tế của bước sử dụng selectIndex.

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;
  }
}
— M.Laida
nguồn
1
Tôi chỉ đang sử dụng @ViewChild('stepper') private myStepper: MatStepper;và hơn this.matStepper.next();chức năng của mình. Hoạt động hoàn hảo
— Tối đa
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.