Материал Степпер | Навигация по заголовку, вызывающая выполнение метода дважды

Я использую степпер с динамическими формами на каждом этапе. Я создал методы для кнопок "Назад" и "Далее", которые я вызываю при нажатии кнопки "Далее" и "Назад" следующим образом:

 <button (click)="previousStage()" mat-raised-button matStepperPrevious>BACK</button>
 <button mat-raised-button matStepperNext (click)="nextStage()">Next</button>

Теперь я также хочу двигаться вперед и назад, когда пользователь нажимает на навигацию по заголовку, поэтому я также создал для этого метод:

 <mat-horizontal-stepper [linear]="true (selectionChange)="onNavChange($event)">

Внутри onNavChange (событие) .. Я вызываю метод next или sub в зависимости от имени шага.

Проблема в том, что когда я нажимаю кнопку «Следующая», она вызывается дважды ... сначала вызывается onNavChange ($ event), а затем метод, вызываемый при нажатии следующей кнопки.

Как я могу убедиться, что он вызывается только один раз? Есть ли способ, чтобы onNavChange () выполнялся только при нажатии на заголовок?


angular angular-material angular-material-stepper mat-stepper
person Sunil Ojha    schedule 05.08.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Не видя вашего полного или примерного nextStage($event) метода, я анализирую проблему. Однако я использую в своих шаблонах (click.prevent). В вашем примере попробуйте

<button mat-raised-button matStepperNext (click.prevent)="nextStage()">Next</button>

Кроме того, какие проверки делают для currentStep? Таким образом, когда вы едете по currentstep, вы только перемещаетесь.

person Thomas Cayne    schedule 05.08.2019

arrow_upward
0
arrow_downward

Возможным решением будет завладеть степпером с помощью ViewChild:

@ViewChild('stepper', {static: false}) stepper: MatStepper;

Теперь вы можете использовать сам наблюдаемый объект и использовать операторы RXJS для фильтрации запроса на добул:

stepper.selectionChange.pipe(take(1)).subscribe(console.log)
person Eliran Eliassy    schedule 05.08.2019

arrow_upward
0
arrow_downward

Спасибо за помощь, но это было простое решение. Вот что я сделал: 1. Убрал вызовы функций с кнопок «Далее» и «Назад». Я оставил matStepperPrevious для возврата и matStepperNext для следующей кнопки. 2. Вызывается нужный метод только для selectionChange ().

Я заметил, что selectionChange () вызывается при изменении шага, и это может произойти при нажатии заголовка или кнопок, поэтому я вызвал свою функцию только для selectionChange ().

person Sunil Ojha    schedule 05.08.2019