如何为多个步骤创建后退按钮？

Question

我有一个 step 系统，我想创建一个 back 按钮到 return 到 previous 步骤。

1)- 第 1 步是一个有两个输入的表单

2)- 第2步，显示第1步输入的数据

而且，我有一个 back 按钮，但我不知道如何在用户单击该按钮时返回到第 1 步？

HTML - Angular

<!--- STEP 1 -->
<ng-container *ngIf="step == 1">
   <div class="home-content">
      <div class="container">
         <div class="pt-50">
            <h1 class="text-center pb-3">Step n ° 1</h1>
            <div class="row pt-3 container">
               <div class="card" style="width: 100%;">
                  <div class="card-body">
                     <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && step1()">
                     <div class="row row-cols-3 pt-3">
                        <div class="col text-end">
                           <label for="contact" class="form-label">Contact</label>
                        </div>
                        <div class="col-4">
                           <input id="contact" name="contact" type="text" class="form-control" style="min-width: 380px" maxlength="25" [(ngModel)]="contact" />
                        </div>
                     </div>
                     <div class="row row-cols-3 pt-3">
                        <div class="col text-end">
                           <label for="phone" class="form-label">Phone</label>
                        </div>
                        <div class="col-4">
                           <input id="phone" name="phone" type="number" class="form-control" style="min-width: 380px" maxlength="25" [(ngModel)]="phone" />
                        </div>
                     </div>
                     <div class="row row-cols-3 pt-3">
                        <div class="col"></div>
                        <div class="col text-start">
                           <button type="submit" class="btn btn-primary" style="background-color: #239CD3;" [disabled]="formulaire.form.invalid">Confirm</button>
                        </div>
                     </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</ng-container>

<!--- STEP 2 -->
<ng-container *ngIf="step == 2">
   <div class="home-content">
      <div class="container">
         <div class="pt-50">
            <div class="breadcrumb d-flex justify-content-between border-bottom pb-3">
               <h2>Data step n° 1</h2>
               <button type="button" (click)="goBack()" class="btn btn-primary m-1 btnColor">Back</button>
            </div>
            <div class="pt-3 container">
               <div class="card">
                  <div class="card-body">
                     <table class="table table-striped table-hover">
                        <thead class="thead-light">
                           <tr class="text-center">
                              <th scope="col">Contact</th>
                              <th scope="col">Phone</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td scope="row" class="text-center">{{ contact }} </td>
                              <td scope="row" class="text-center">{{ phone }} </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
         <div class="pb-5"></div>
      </div>
   </div>
</ng-container>

TS

我的问题是 goBack() 方法？我不知道如何回到第 1 步...

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

    contact: string = '';
    phone: number;
    step = 0;

    constructor(
        ...
        private router: Router,
        private activatedRoute: ActivatedRoute,
        private modalService: BsModalService,
        private location: Location,

    ) {

        this.step = 1;

    }


    ngOnInit(): void {
            this.getUser();
        }

        ....

    step1(): void {
        if (this.step == 1) {
            this.step++;
        }
    }

    step2(title: Title | undefined): void {
        if (this.step == 2) {
            if (title) {
                this.title = title;
                this.step++;
            }
        }
    }

    step3() {
        if (this.step == 3) {
            this.step++;
        }
    }

    goBack(): void {

    }

谢谢

Answer 1

也许减少 1 级？

goBack(): void {
  this.step--;
}

如何为多个步骤创建后退按钮？

How to create a back button for multiple steps?

typescript

angular