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. ...
随机推荐
- SCRUM REPORT DIRECTORY
Alpha sprint scrum 1 scrum 2 scrum 3 scrum 4 scrum 5 scrum 6 scrum 7 scrum 8 scrum 9 scrum 10 Beta s ...
- 07-求解Ax=0:主变量、特解
一.定义转向算法 在第六节讲了空间,列空间,零空间的定义,这节主要讲解如何求出这些空间,即求解$Ax=0$的过程是怎么样的过程,以下面的矩阵$A$为例:(这里主要是长方阵) $A=\left[\beg ...
- lvm分区创建和扩容
shell> fdisk /dev/xvdb #### 选择磁盘 Command (m for help): m #### 帮助 Command action a toggle a bootab ...
- django之配置文件setting.py
一:配置文件setting.py中的简单配置更改 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 简单解释 ...
- django 多条数据显示的坑(怪自己)
今天的问题是,一个接口执行了很多次,每次都会在结果表里面记录一条结果信息,在查看接口详情页面,我想只展示一条,然后就进入误区了 第一个是怪自己手残,api_id 被自己写成app_id了 第二个是筛 ...
- Oracle RAC运维所遇问题记录二
oracle12c RAC源端与Dataguard目标端实时同步,因业务需求需要在源端增加PDB 1. 源端添加PDB CREATE PLUGGABLE DATABASE kdlxpdb admin ...
- Jira插件安装
以下操作需要反编译 1.反编译的jar包 1)E:\JIRA安装路径\atlassian-jira\WEB-INF\atlassian-bundled-plugins\atlassian-univer ...
- UITextField 长按文本框指定删除某个位置内容
普通的光标移动,点键盘的删除键,会从最后一位删除,加一UITextField的分类即可 #import <UIKit/UIKit.h> @interface UITextField (Ex ...
- 【Nacos】Nacos安装
1.Nacos简介 Nacos是阿里巴巴集团开源的一个易于使用的平台,专为动态服务发现,配置和服务管理而设计.它可以帮助您轻松构建云本机应用程序和微服务平台. Nacos基本上支持现在所有类型的服务, ...
- 对拍 & 随机数生成
用 Windows 批处理对拍: 1. 新建一个批处理(.bat),代码如下: :loop@echo off data_creator.exe force_solution.exe correct_s ...