2017-09-28 54 views
5

'da bir yatay-yatay-adım adımlarını programlı olarak hareket ettirebilirim Açısal Malzeme (Açısal 4+ ile) ile ilgili bir sorum var. Bileşen şablonumda bir <mat-horizontal-stepper> bileşeni ekledim ve her adımda <mat-step> Bileşende gezinmek için adım düğmelerinin var. ... bu yüzden gibiAçısal/Açısal Malzeme

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

Şimdi her adımın dışarı düğmeleri çıkarın ve statik konumda hatta <mat-horizontal-stepper> dışında başka bir yerde <mat-horizontal-stepper> onları var ve geriye gidebilirsiniz ve mümkün olup olmadığını merak ediyorum bileşen kod çizelgesinde kod kullanarak ileriye doğru. Bir fikir vermek için, benim HTML tavsiye, bağlantılar, cevaplar, vb için şimdiden çok teşekkürler bu

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

Şu anda bu araştırıyorum ama bazen cevaplar benim prototip daha çabuk gelebilir gibi bir şey olmak istiyorum ..

cevap

9

Evet. MatStepper'un selectedIndex özelliğini kullanarak belirli bir adım atlamak mümkündür. Ayrıca, MatStepper kamu yöntemlerini next() ve previous() ortaya koyar. Onları ileri geri taşımak için kullanabilirsiniz.

mesela sizin step bir id ekleyin: Şablonunuzda

#stepper.

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

.. ve daktilo versiyonunda: stackblitz demo için

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

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

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

Linki Sonra goBack() ve goForward() yöntemlerde, step id geçmektedir.

etkinleştirebilir/kullanarak Back ve Next düğmeleri devre dışı bırakabilirsiniz aşağıdadır: Ayrıca

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

Sadece ViewChild'e bakıyordum ve Step'i nasıl referans gösterebileceğimi görüyordum - ama sen beni buna yendin! Disable/enable işlevselliğini de eklediğiniz gerçeğini sevin! Biraz puan al! –

+0

'ViewChild', ayrıca, adımı atmak için iyi bir seçenektir. Ama ben bir kimlik geçirmeyi tercih ederim.Ben de 'ViewChild' çözümünü demoda ekledim \ o/ – Faisal

+0

Hi Faisal Teşekkürler, bu kadar büyük bir cevap için teşekkürler, bir yardım daha, mat adımı bir forma geçirme yerine açısal bileşenleri geçirebilir ve sonra bu bileşene bağlı olarak değişebilir Bir sonraki mat-adımı nasıl geçebilirim, nasıl başarılabileceğine, – Enthu

4

@Faisal 'ın cevabı, bu step geçmesine gerek kalmadan MatStepper sıçrattı almak benim argümanlar içinde.

Bu, örn. Service veya başka bir şeyden.

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

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

İşte stackblitz demo bu.

+1

bu bağlantıya rağmen bu sorunun cevabını verebilir, cevabın temel parçalarını buraya dahil etmek ve referans için bağlantı sağlamak daha iyidir. Bağlantılı sayfa değiştiğinde yalnızca bağlantı yanıtları geçersiz olabilir. - [Yorum Yaz] (/ review/düşük kaliteli yazılar/18610018) – Larnu

+0

Şimdi cevabın temel pars eklendi. – Altus