要在Angular 7中使用Bootstrap模态框来显示动态内容,你可以按照以下步骤进行操作:
npm install bootstrap
npm install @ng-bootstrap/ng-bootstrap
angular.json
文件,将Bootstrap样式文件和JavaScript文件添加到styles
和scripts
数组中:"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
NgbModal
,并创建一个方法来打开模态框:constructor(private modalService: NgbModal) { }
openModal(content) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
// 模态框关闭时执行的逻辑
}, (reason) => {
// 模态框取消时执行的逻辑
});
}
模态框标题
在以上代码示例中,我们创建了一个按钮来触发打开模态框的方法。在模态框中,我们使用ng-template
来定义模态框的内容,并使用modal-header
、modal-body
和modal-footer
类来设置模态框的头部、主体和底部。你可以在modal-body
中显示动态内容。
当模态框关闭时,result.then()
函数将执行相应的逻辑。当模态框取消时,result.catch()
函数将执行相应的逻辑。
这就是在Angular 7中使用Bootstrap模态框来显示动态内容的解决方法。希望对你有所帮助!
上一篇:Angular 7 表单取消