Angular 9 Bootstrap 4 Многоступенчатый модальный - PullRequest
Новая
       12

Angular 9 Bootstrap 4 Многоступенчатый модальный

0 голосов
/ 23 марта 2020

Мне нужно многошаговое модальное для моего Angular приложения. Я довольно плохо знаком с Angular и надеялся, что это будет простая задача, но, к сожалению, я не смог найти никаких решений. Кто-нибудь когда-либо создавал его раньше? Не уверен, что у меня есть навыки, необходимые для его создания. Любая помощь приветствуется.

1 Ответ

2 голосов
/ 23 марта 2020

По моему опыту, это не был "многошаговый" модал, а скорее серия модалов, каждая из которых имеет кнопки, которые go, где я хочу, чтобы они go, в большинстве случаев, были другими модальными. , Вы можете включить их все в один и тот же модал, и просто иметь несколько операторов ngIf, которые скрывают все элементы div, которые не являются частью текущего шага, или вы можете буквально иметь 5 разных модалов.

I сделали первое, где я использовал 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-контейнеры, как хотите.

...