Angular 9 Bootstrap 4 Multi-Step Modal

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容器。