Как вызвать модалы с помощью шоу

Question

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

Мой компонент.тс

@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

Потому что с 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 2

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

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

Для того, чтобы:

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

Answer 3

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

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

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

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

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