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，无论您喜欢什么。