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();
}
stackblitz 데모 링크 .
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 의 답변 외에도 인수에 스테퍼를 전달할 필요없이 MatStepper 점프를 만드는 데 대한 나의 견해입니다.
예를 들어 a 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 데모 입니다.
답변
당신이 경우 프로그램을 탐색 할 다음 단계에 당신이 경우 선형 스테퍼를 사용하여 , 단계 아래를 따르십시오 :
- 다음
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
파일 false로 초기화isThisStepDone
합니다 .isThisStepDone: boolean = false;
-
그런 다음 NEXT STEP 버튼에 대한 작성 방법
next()
:submit(stepper: MatStepper) { this.isThisStepDone = true; setTimeout(() => { // or do some API calls/ Async events stepper.next(); }, 1); }
답변
selectedIndex를 사용하여 스테퍼의 실제 인덱스를 지정하여 수행 할 수도 있습니다.
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;
}
}