Получение ошибки при сбросе шагового двигателя в angular

Question

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

ОШИБКА RangeError: Превышен максимальный размер стека вызовов

Ниже приведен мой код

stepper-example.component. ts

import { Component, OnInit, ViewChild,ChangeDetectorRef } from '@angular/core';
import { MatStepper } from '@angular/material';

@Component({
  selector: 'stepper-example',
  templateUrl: 'stepper-example.component.html'
})
export class StepperExampleComponent {

  @ViewChild(MatStepper)
  matStepper: MatStepper;
  userTypeSelected = false


  constructor(private cd: ChangeDetectorRef){}

    selectUser(){
      this.userTypeSelected = true
      this.cd.detectChanges();
      this.matStepper.next();
    }

    prev(){
        this.userTypeSelected = false
        this.matStepper.reset()
        this.cd.detectChanges();
    }

    selectionChange(event){
        if(event.selectedIndex === 0){
          this.matStepper.reset()
        }
    }
}

stepper-example.component. html

<mat-horizontal-stepper [linear]="true" (selectionChange)="selectionChange($event)">
    <ng-template matStepperIcon="edit">
        <mat-icon>check</mat-icon>
    </ng-template>
    <mat-step [completed]="userTypeSelected">
        <h3>Click to fo next</h3>
        <button (click)="selectUser()">User Type - 1</button> <br>
        <button>User Type - 2</button>
    </mat-step>
    <mat-step>
        Information -2
    </mat-step>
</mat-horizontal-stepper>

    <button type="button" (click)="prev()" *ngIf="matStepper.selectedIndex > 0">Back</button>

Ссылка в стеке равна

https://stackblitz.com/edit/angular-material-routed-stepper-nvjnml

Кнопка возврата работает только в том случае, если я удаляю событие selectionChange.

, пожалуйста, дайте мне знать, почему я делаю неправильно.

Answer 1

Вы не можете позвонить this.matStepper.reset() на selectionChange обратном вызове вашего степпера.

Действительно, каждый раз, когда шагер будет меняться, он будет вызывать this.matStepper.reset(), который произведет замену шагера, и поэтому снова вызовет selectionChange, et c ... В итоге вы получите бесконечное l oop следовательно ERROR RangeError: Превышен максимальный размер стека вызовов

Глядя на Angular Документацию по материалам здесь https://material.angular.io/components/stepper/overview не похоже, что существует простой способ сбросить шаговый двигатель, когда вы нажмете на предыдущий шаг на нем.

Кнопка Back только кажется хорошим решением.