angular - 如何使用 show 触发模态

Question

我正在使用this.myModal1.show()&this.myModal2.show()打开模式。但它总是触发myModal1

我的组件.ts

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

我的组件.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 定位第一个元素。

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

您可以使用 ViewChild 从视图 DOM 中获取与选择器匹配的第一个元素或指令。

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

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

Answer 3

您应该将参考 ID 传递给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 中获取与选择器匹配的第一个元素或指令。