Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现
模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框。
下面,我用一个小例子来简单展示实现模态框功能的过程:
1、为项目加包:
ng add ngx-bootstrap
2、在xxx.module.ts(模块.ts文件)中引入:
...
import { ModalModule } from "ngx-bootstrap/modal";
... @NgModule({
imports: [
...
ModalModule.forRoot(),
...
]
})
...
3、创建一个模块框公共组件:
//.ts部分 import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap'; @Component({
selector: 'response-modal',
templateUrl: './response-modal.html'
}) export class ResponseModalService {
public header: string;
public body: string; constructor(public modalRef: BsModalRef
) {} }
<!-- 模态框模板部分 .html --> <style>
.centerize {
text-align: center;
}
</style> <div class="container-fluid"><!-- 模态框容器样式 -->
<div class="modal-header"><!-- 框头样式 -->
<h5>{{ header }}</h5>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> <!-- 关闭按钮样式 -->
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="white-space: pre-line;"><!-- 框内容样式 -->
{{ body }}
</div>
<div class="centerize">
<button type="button" text-aling="center" class="btn btn-primary mr-2" (click)="modalRef.hide()">OK</button><!-- 常规按钮样式 -->
</div>
<p>
</div>
4、在xxx.page.ts(模版.ts文件)中引入并,并调用:
import { BsModalRef, BsModalService } from "ngx-bootstrap";//引入模态框资源对象及服务对象
... public modalRef: BsModalRef;
... constructor(
private modalService: BsModalService,
...
) {
...
}
... public openUpdateNotification(message: string): void {
this.modalRef = this.modalService.show(ResponseModalService, {//初始化一个之前创建好的模态框组件
initialState: {
header: "",
body: message
},
class: "modal-lg"
});
}
5、在合适位置调用打开模态框的方法openUpdateNotification即可。
Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现的更多相关文章
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- BootStrap学习(6)_模态框
一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- Bootstrap学习5--bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap入门(二十一)组件15:警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门(二十)组件14:警告框
Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...
随机推荐
- [POI2006]ORK-Ploughing(贪心,枚举)
[POI2006]ORK-Ploughing 题目描述 Byteasar, the farmer, wants to plough his rectangular field. He can begi ...
- 【LeetCode】位运算 bit manipulation(共32题)
[78]Subsets 给了一个 distinct 的数组,返回它所有的子集. Example: Input: nums = [,,] Output: [ [], [], [], [,,], [,], ...
- [sqlmap 源码阅读] heuristicCheckSqlInjection 探索式注入
上面是探索式注入时大致调用过程,注入 PAYLOAD 1.)("'(.((. , 数据库报错,通过报错信息获取网站数据库类型(kb.dbms),并将保存报错(lasterrorpage). ...
- bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+贪心+二进制
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4811 题解 我现在为什么都写一题,调一天啊,马上真的退役不花一分钱了. 考虑这道题的弱化版 N ...
- 循环神经网络(LSTM和GRU)(2)
1.tf.nn.dynamic_rnn()函数 参考:http://www.360doc.com/content/17/0321/10/10408243_638692495.shtml 参考:http ...
- Linux学习-MySQL的高可用性集群Galera Cluste
一.Galera Cluste简介 1.Galera Cluster 集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版 ...
- 在linux中 部署 mongo 数据库服务端
1 首先需要一台linux服务器(我用的redhat linux,其它的也大同小异), 玩一玩的话,推荐亚马逊上面去创建一个免费的linux服务器,有关具体创建linux服务器不在这赘述. https ...
- leetcode_1293. Shortest Path in a Grid with Obstacles Elimination_[dp动态规划]
题目链接 Given a m * n grid, where each cell is either 0 (empty) or 1 (obstacle). In one step, you can m ...
- div页面布局基本布局知识
页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 2A3T我的PMP备考及考试心得20181208
2018年的下半年由于工作不是很忙,所以生活中有更好的精力去做些自己的事情.出于工作需要,我决定考个证书充实下自己,在各大网站搜索解惑后决定考PMP,并报了个培训班 一.PMP考试简介 共200道选择 ...