我已经在index.html中引入了Bootstrap 5。
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
我尝试在我的 Angular 页面中使用 Bootstrap 文档中的示例代码,但它无法工作。
可能的原因是什么?是否有其他方法可以在 Angular 页面中使用模态框?
我已经在index.html中引入了Bootstrap 5。
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
我尝试在我的 Angular 页面中使用 Bootstrap 文档中的示例代码,但它无法工作。
可能的原因是什么?是否有其他方法可以在 Angular 页面中使用模态框?
在2021年,完美运作。
使用npm install --save bootstrap
安装bootstrap。
在angular.json
文件中设置路由到bootstrap的css和js。
在component.ts文件中。
import * as bootstrap from 'bootstrap';
modalName: bootstrap.Modal | undefined
save(){
this.testModal?.toggle()
}
openModal(element){
this.testModal = new bootstrap.Modal(element,{} )
this.testModal?.show()
}
<button class="btn btn-primary" (click)="openModal(testModal)">Add dish</button>
<div class="modal" tabindex="-1" #testModal id="testModal"> ...</div>
const a = new (window as any).bootstrap.Modal(element);
//a.toglle();
//a.show();
//a.hide();
//a.dispose();
npm install bootstrap@next
,并使用Bootstrap 5模态框,它应该可以正常工作。
https://www.npmjs.com/package/bootstrap/v/5.0.0-alpha1
npm install bootstrap@next
将以下代码添加到 src/app/app.component.html 文件中,以在 Web 浏览器上获得最终输出:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger" id="exampleModalLabel">Hey
Bootstrap 5!!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body text-danger">
Therichpost.com
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
需要将以下代码添加到 angular.json 文件中:
"styles": [
...
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
...
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
我尝试了很多其他答案,@Gajanan的答案是对我有效的。我为了未来的自己或其他可能遇到这个问题的人回答这个问题,实际上非常简单,可能在Bootstrap文档或Angular文档中有解释,这是一个tl;dr。
这是我使用的步骤:
在这之后,我的大脑认为一切都正确,因为Bootstrap样式加载正常。但是当我尝试使用模态框时,它却不起作用,所以我使用了@Gajanan的回答,它起作用了。
但是还要注意的是,要小心在哪里添加脚本,我把脚本添加到了其他地方,结果浪费了15分钟。
{
...
"projects": {
...
"myProject": {
...
"architect": {
...
"build": {
...
"options": {
...
"scripts": ["here "],
},
...
"test": {
...
"options": {
...
"scripts": ["NOT here"],
}
}
}
}
}
}
}
我知道...我知道...很明显,但我也遇到了这个问题,所以这是一种惩罚自己犯错的方式。
angular.json
中。 - TinsGnpm i bootstrap
。 - TinsG