如何使用 show 触发模态答案

【问题标题】：How to trigger modals using show如何使用 show 触发模态
【发布时间】：2018-10-27 20:16:51
【问题描述】：

我正在使用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>

【问题讨论】：

它对你有用吗？答案？

标签： angular ngx-bootstrap ngx-bootstrap-modal

【解决方案1】：

这是因为 @ViewChild(ModalDirective) 将使用 ModalDirective 定位第一个元素。

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

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

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

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

【讨论】：

【解决方案2】：

尝试改变：

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

收件人：

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

【讨论】：

【解决方案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 中的选择器。

【讨论】：

@BhavaniPrasad 在 stackblitz 上？还是在你的最后？因为它在 stackblitz 上看起来不错
一些 z-index 的问题。工作正常（y）。如果它在另一个component.html中，我可以访问它吗？
@BhavaniPrasad 如果您正在寻找一个通用模型，那么您可以制作单独的组件，该组件可以使用带有动态数据的服务打开。例如，你可以看看这个：stackblitz.com/edit/ngx-bootstrap-fh92s3
@BhavaniPrasad 请在此答案末尾检查“编辑”，我已将其更新为您想要的内容，如果对您有帮助，请点赞。 stackoverflow.com/questions/50296973/…
@BhavaniPrasad 我已经添加了日期选择器问题的答案，看看是否适合你。