如何在不使用jQuery的情况下将Angular 2+使用引导模态? [英] How to use bootstrap modal with angular 2+ without using jquery?

问题描述

我在项目中包含了Bootstrap CSS，但没有包含Javascript或jquery位.我已经弄清楚了如何仅使用角度打开和关闭下拉菜单等，但是还无法触发模式.

I have included Bootstrap CSS in my project but not the its Javascript or jquery bits. I have figured out how to open and close dropdown menus etc with just angular but haven't been able to trigger the modal.

如何在不使用Bootstraps的javascript或jQuery的情况下打开(和关闭)模式对话框?

How do I open (and close) a modal dialog without using Bootstraps's javascript or jQuery?

我对角度知识还很陌生，所以对于SO来说可能太明显了.仍在创建问题，以便稍后我可以回答.

I am quite new to angular so this might be too obvious for SO. Still creating a question so I can answer it later.

推荐答案

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

Without using any Angular plugins this is the easiest way to do it --

将(click)="showModal=true"添加到应该打开模式的按钮元素中.

Add (click)="showModal=true" to the button element which should open the modal.

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

由于没有一种关闭方式的方式来展示方式并不礼貌.在模态中创建一个关闭按钮，并添加此(click)="showModal=false".

Since it is not polite to show a modal without a way to close it. Create a close button in the modal and add this (click)="showModal=false".

在模态组件中添加以下CSS

Add following css to the modal component

.modal.show {
    display:block;
  }

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

So when the button is pressed a 'show' class is added to the modal which unhides the modal. When the close button removes this class the modal is hidden again.

这适用于引导程序4.

这篇关于如何在不使用jQuery的情况下将Angular 2+使用引导模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！