Angular 9 Bootstrap 4 多步模式

Question

我的 Angular 应用程序需要一个多步骤模式。我对 Angular 还很陌生，希望这将是一项简单的任务，但不幸的是，我找不到任何解决方案。以前有人创建过吗？不确定我是否具备创建一个所需的技能。任何帮助表示赞赏。

Answer 1

根据我的经验，它并不是真正的“一个”多步模式，而是一系列模式，每个模式都有按钮，在大多数情况下，我希望它们去到另一个模式。您可以将它们全部包含在同一个模态中，并且只需使用一堆 ngIf 语句来隐藏所有不属于当前步骤的 div，或者您实际上可以拥有 5 个不同的模态。

我已经完成了前者，我使用了 ngIf。

<div class="row">
  <div class="col">
   <ng-container *ngIf="panelNum == 1"> Put entire panel code here</ng-container>
   <ng-container *ngIf="panelNum == 2"> Put entire panel code here</ng-container>
   <ng-container *ngIf="panelNum == 3"> Put entire panel code here</ng-container>
   <ng-container *ngIf="panelNum == 4"> Put entire panel code here</ng-container>
   <ng-container *ngIf="panelNum == 5"> Put entire panel code here</ng-container>
 </div>
</div>

<div class="row">
<div class="col">
   <button type="button" class="btn btn-primary float-right" (click)="next()">Next</button>
   <button type="button" class="btn btn-primary float-right" (click)="prev()">Prev</button>
 </div>
 </div>

然后在你的 TS 文件中：

next() { 
 if (this.panelNum < 5) this.panelNum++; else this.panelNum = 1;
}

prev() {
 if (this.panelNum > 1) this.panelNum--; else this.panelNum = 5;
}

使用数组、组件和其他管理面板的方式，您可以随心所欲地复杂化，但这是为了直接回答您的问题。您可以使用 Div 或 ng-containers，随心所欲。