Как вызвать модалы, используя шоу

Question

Я использую this.myModal1.show() & this.myModal2.show(), чтобы открыть модалы.Но это всегда срабатывает myModal1

Мой component.ts

@ViewChild(ModalDirective) myModal1: ModalDirective;
@ViewChild(ModalDirective) myModal2: ModalDirective;

Мой component.html

<div class="modal fade" bsModal #myModal1="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name">
  <div class="modal-dialog otp-modal">
    <div class="modal-content">
        ...
    </div>
  </div>
</div>

<div class="modal fade" bsModal #myModal2="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name">
  <div class="modal-dialog otp-modal">
    <div class="modal-content">
        ...
    </div>
  </div>
</div>

Answer 1

Попробуйте изменить:

@ViewChild(ModalDirective) myModal1: ModalDirective;
@ViewChild(ModalDirective) myModal2: ModalDirective;

К:

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

Answer 2

Вы должны передать ссылочный идентификатор в Viewchild вместо ModalDirective

Поскольку с ModalDirective он всегда нацелен на первый элемент с этой директивой.

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;

Вот ссылка Stackblitz с этим реализовано.

https://stackblitz.com/edit/angular-ngx-bootstrap-p6ohpe

Также см. Документы здесь https://angular.io/api/core/ViewChild

Вы можетеиспользуйте ViewChild, чтобы получить первый элемент или директиву, соответствующую селектору из DOM представления.

Answer 3

Это потому, что @ViewChild (ModalDirective) нацелится на первый элемент, используя ModalDirective.

https://angular.io/api/core/ViewChild

Вы можете использовать ViewChild, чтобы получить первый элемент или директиву, соответствующую селектору из DOM представления.

Я думаю, вы должны использовать переменную ссылки на шаблон так:

@ViewChild('myModal1') myModal1: ModalDirective;
@ViewChild('myModal2') myModal2: ModalDirective;