- Ngx-Bootstrap 教程
- Ngx-Bootstrap - 主页
- Ngx-Bootstrap - 概述
- Ngx-Bootstrap - 环境设置
- Ngx-Bootstrap - 手风琴
- Ngx-Bootstrap - 警报
- Ngx-Bootstrap - 按钮
- Ngx-Bootstrap - 轮播
- Ngx-Bootstrap - 折叠
- Ngx-Bootstrap - DatePicker
- Ngx-Bootstrap - 下拉菜单
- Ngx-Bootstrap - 模态框
- Ngx-Bootstrap - 分页
- Ngx-Bootstrap - 弹出窗口
- Ngx-Bootstrap - 进度条
- Ngx-Bootstrap - 评级
- Ngx-Bootstrap - 可排序
- Ngx-Bootstrap - 选项卡
- Ngx-Bootstrap - 时间选择器
- Ngx-Bootstrap - 工具提示
- Ngx-Bootstrap - Typeahead
- Ngx-Bootstrap 有用资源
- Ngx-Bootstrap - 快速指南
- Ngx-Bootstrap - 有用的资源
- Ngx-Bootstrap - 讨论
Ngx-Bootstrap - 模态框
ngx-bootstrap 模态组件是一个灵活且高度可配置的对话框提示,提供多个默认值,并且可以使用最少的代码。
模态指令
选择器
[bs模态]
输入
config - ModalOptions,允许通过元素属性设置模式配置
输出
onHidden - 当模式完成对用户隐藏时触发此事件(将等待 CSS 转换完成)。
onHide - 当调用 hide 实例方法时立即触发此事件。
onShow - 当调用 show 实例方法时,此事件立即触发。
onShown - 当模式对用户可见时触发此事件(将等待 CSS 转换完成)。
方法
show() - 允许手动打开模式。
hide() - 允许手动关闭模式。
toggle() - 允许手动切换模式可见性。
showElement() - 显示对话框。
focusOtherModal() - 事件技巧。
例子
由于我们要使用模式,我们必须更新ngx-bootstrap Dropdowns章节中使用的 app.module.ts 以使用ModalModule和BsModalService。
更新 app.module.ts 以使用 ModalModule 和 BsModalService。
应用程序模块.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { TestComponent } from './test/test.component'; import { AccordionModule } from 'ngx-bootstrap/accordion'; import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert'; import { ButtonsModule } from 'ngx-bootstrap/buttons'; import { FormsModule } from '@angular/forms'; import { CarouselModule } from 'ngx-bootstrap/carousel'; import { CollapseModule } from 'ngx-bootstrap/collapse'; import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker'; import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown'; import { ModalModule, BsModalService } from 'ngx-bootstrap/modal'; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule, ModalModule ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService], bootstrap: [AppComponent] }) export class AppModule { }
更新 test.component.html 以使用模式。
测试.component.html
<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button> <ng-template #template> <div class="modal-header"> <h4 class="modal-title pull-left">Modal</h4> <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> This is a sample modal dialog box. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button> </div> </ng-template>
更新 test.component.ts 中相应的变量和方法。
测试组件.ts
import { Component, OnInit, TemplateRef } from '@angular/core'; import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { modalRef: BsModalRef; constructor(private modalService: BsModalService) {} openModal(template: TemplateRef<any>) { this.modalRef = this.modalService.show(template); } ngOnInit(): void { } }
构建和服务
运行以下命令启动角度服务器。
ng serve
服务器启动并运行后。打开http://localhost:4200。单击“打开模式”按钮并验证以下输出。