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

Question

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

 <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() выполняется только при нажатии на заголовок?

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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

stepper.selectionChange.pipe(take(1)).subscribe(console.log)