如何使用 show 触发模态

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) 将使用 ModalDirective 定位第一个元素。

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

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

我认为你应该像这样使用模板引用变量：

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

Answer 2

尝试更改：

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

收件人：

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

Answer 3

您应该将引用 ID 传递给 Viewchild 而不是 ModalDirective

因为 ModalDirective 它总是以该指令的第一个元素为目标。

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

这是已实现的 Stackblitz link。

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

另请参阅此处的文档 https://angular.io/api/core/ViewChild

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

如何使用 show 触发模态

How to trigger modals using show

ngx-bootstrap

angular

ngx-bootstrap-modal