如何在不使用 jquery 的情况下使用带有 angular 2+ 的引导模式？

Question

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

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

我对 angular 很陌生，所以这对 SO 来说可能太明显了。仍在创建一个问题，以便我稍后回答。

Answer 1

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

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

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

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

将以下css添加到模态组件

.modal.show {
    display:block;
  }

因此，当按下按钮时，会在模式中添加一个“显示”类，以取消隐藏模式。当关闭按钮删除此类时，模态再次隐藏。

这适用于引导程序 4。