Question

我正在使用this.myModal1.show()＆amp; 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

您可以使用ViewChild从视图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与此实现的链接。

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

另见文档 https://angular.io/api/core/ViewChild

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

如何使用show触发模态

3 个答案: