如何使用代码在 Angular 2 中打开模态框？

通常我们使用data-target="#myModal" in the <button>打开模式。现在我需要使用代码来控制何时打开模式。

如果我使用[hidden] or *ngIf为了展示它，我需要删除class="modal fade"，否则，模态框将永远不会显示。像这样：

<div [hidden]="hideModal" id="myModal">

然而，在这种情况下，删除后class="modal fade"，模态不会淡入并且背景中没有阴影。更糟糕的是，它会显示在屏幕底部而不是屏幕中心。

有没有办法保留class="modal fade"并使用代码打开它？

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>

这是我发现的一种方法。您可以添加隐藏按钮：

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>

然后使用代码“单击”按钮打开模态框：

document.getElementById("openModalButton").click();

这种方式可以保持模态的bootstrap风格和动画的淡入淡出。