如何為多個步驟創建后退按鈕？

我有一個step系統，我想創建一個back按鈕來回傳到該previous步驟。

1)- 步驟 1 是一個有兩個輸入的表單

2)- 第2步，顯示第1步輸入的資料。

而且，我有一個back按鈕，但是當用戶單擊該按鈕時，我不知道如何制作，它會回傳到第 1 步？

HTML - 角

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

    }  

謝謝

uj5u.com熱心網友回復：

也許減少一步？

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

標籤：有角度的 打字稿

上一篇：從Observable發出，然后進行額外的RESTAPI呼叫以獲取更多詳細資訊

下一篇：如何將可觀察物件變成可觀察陣列