wake-up-neo.com

Kann ich die Schritte eines Matte-Horizontal-Steppers in Winkel-/Winkelmaterial programmgesteuert verschieben?

Ich habe eine Frage zu Winkelmaterial (mit Winkel 4+). Sagen Sie in meiner Komponentenvorlage, ich füge eine <mat-horizontal-stepper>-Komponente hinzu, und in jedem Schritt <mat-step> habe ich Stepper-Buttons, um die Komponente zu navigieren. Wie so ...

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

Jetzt frage ich mich, ob es möglich ist, die Schaltflächen aus jedem Schritt zu entfernen und sie an anderer Stelle im <mat-horizontal-stepper> in einer statischen Position oder sogar außerhalb des <mat-horizontal-stepper> zu haben, und ich kann mit Code in meiner Komponenten-TypeScript-Datei vorwärts und rückwärts navigieren. Um eine Idee zu geben, möchte ich, dass mein HTML so ähnlich ist

<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>
22
Mike Sav

Ja. Mit der selectedIndex-Eigenschaft der MatStepper können Sie zu einem bestimmten Stepper springen. MatStepper macht auch öffentliche Methoden next() und previous() verfügbar. Sie können sie verwenden, um sich vor und zurück zu bewegen.

In Ihrer Vorlage:

Fügen Sie Ihrem Stepper eine ID hinzu, z. #stepper. Übergeben Sie dann in Ihren goBack()- und goForward()-Methoden die Stepper-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>

.. und in Ihrem TypeScript: 

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

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

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

Link zu stackblitz demo .

Sie können die Schaltflächen Back und Next folgendermaßen aktivieren/deaktivieren: 

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

Wenn Sie programmgesteuert navigieren möchten zum nächsten Schritt und wenn Sie mit einem linearen Schritt sind, gehen Sie folgendermaßen vor:

  • Erstellen Sie ein stepper wie folgt: <mat-horizontal-stepper linear #matHorizontalStepper>
  • Definiere mat-step Wie folgt: <mat-step [completed]="isThisStepDone">
  • Erstellen Sie von innen mat-step Eine Schaltfläche, um zum nächsten Schritt zu gelangen: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
  • Deklarieren Sie in der Datei .ts Eine MatStepper -Referenz mit dem Namen stepper :
    @ViewChild('matHorizontalStepper') stepper: MatStepper;
  • Initialisieren Sie in der Datei .tsisThisStepDone als false: isThisStepDone: boolean = false;
  • Dann schreiben Sie die Methode für die NEXT STEP Taste mit dem Namen next():

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

Neben der Antwort von @ Faisal ist es meine Meinung, den MatStepper zu springen, ohne den Stepper in den Argumenten übergeben zu müssen.

Dies ist hilfreich, wenn Sie mehr Flexibilität bei der Bearbeitung des Steppers benötigen, z. von einer Service oder etwas anderem.

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

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

Hier ist die stackblitz Demo .

9
Altus

Sie können dies auch tun, indem Sie den aktuellen Index des Steppers mithilfe von selectedIndex angeben.

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;
  }
}
0
M.Laida