如何使用角度为2+的bootstrap模态而不使用jquery？

Question

我在我的项目中包含了Bootstrap CSS，但没有包含它的Javascript或jquery位。我已经想出了如何打开和关闭下拉菜单等只是有角度但是无法触发模态。

如何在不使用Bootstraps的javascript或jQuery的情况下打开（并关闭）模式对话框？

我对角度很新，所以对于SO来说这可能太明显了。仍在创建一个问题，以便我稍后再回答。

Answer 1

不使用任何Angular插件，这是最简单的方法 -

将(click)="showModal=true"添加到应打开模态的按钮元素。

将[ngClass]="{'show': showModal}"添加到模态元素。

因为在没有办法关闭它的情况下显示模态是不礼貌的。在模态中创建关闭按钮并添加此(click)="showModal=false"。

将以下css添加到模态组件

.modal.show {
    display:block;
  }

因此，当按下按钮时，“show”类被添加到取消隐藏模态的模态中。当关闭按钮删除此类时，模态将再次隐藏。

这适用于bootstrap 4。

Answer 2

以下是两个Bootstrap组件的Angular实现：ng-bootstrap和ngx-bootstrap。它们都允许在没有jQuery的情况下使用Bootstrap。