下面是一个使用Angular 11和NgbModal来通过脚本添加或删除Modal窗口的示例。
首先,确保你已经安装了必要的依赖项,包括Angular和ng-bootstrap。
安装 ng-bootstrap:
npm install @ng-bootstrap/ng-bootstrap
在你的Angular组件中,你需要导入必要的依赖项:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
然后,你可以在组件中使用NgbModal来添加或删除Modal窗口。
添加Modal窗口:
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
@ViewChild('content') content: ElementRef; // 获取Modal窗口的引用
constructor(private modalService: NgbModal) { }
openModal() {
this.modalService.open(this.content, { centered: true }); // 打开Modal窗口
}
}
在模板HTML中,你可以定义一个按钮来触发打开Modal窗口的操作:
// 定义Modal窗口的内容
Modal 标题
Modal 内容
删除Modal窗口:
export class MyComponentComponent {
...
closeModal() {
this.modalService.dismissAll(); // 关闭所有打开的Modal窗口
}
}
在模板HTML中,你可以定义一个按钮来触发关闭Modal窗口的操作:
这样,你就可以通过脚本添加或删除Modal窗口了。希望这个示例对你有帮助!