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";//引入模态框资源对象及服务对象

import { ResponseModalService } from "src/app/shared/component/response-modal";//引入上面创建好的模态框组件

...

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即可。

原文地址:https://www.cnblogs.com/dyhblog/p/11691265.html

时间: 2024-10-09 18:42:52

Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现的相关文章

Bootstrap历练实例:模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:模态框(Modal)插

使用bootstrap的插件实现模态框效果方法步骤详解

本文和大家分享的主要是使用bootstrap 库的模态框插件 modal.js 来实现模态框效果相关内容,同时也使大家进一步熟悉 bootstrap 的插件使用,一起来看看吧,希望对大家学习bootstrap有所帮助. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.

bootstrap 多按钮共用模态框传自定义参

<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 模态框(Modal)插件事件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.ba

使用bootstrap的插件实现模态框效果

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap

BootStrap学习(6)_模态框

一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootStrap中的 modal.js即可 1.用法: 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或hre

Bootstrap(v3.2.0)模态框(modal)垂直居中

Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": function () { return (that.$element.height(

JavaScript强化教程——Bootstrap 包的内容

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootstrap 基本结构 部分详细讲解. CSS:Bootstrap 自带以下特性:全局的 CSS 设置.定义基本的 HTML 元素样式.可扩展的 class,以及一个先进的网格系统.这将在 Bootstrap CSS 部分详细讲解. 组件:Bootstrap 包含了十几个可重用

bootstrap添加多个模态对话框支持

bootstrap添加多个模态对话框支持 (2015-03-04 21:05:35) 转载▼ 标签: 房产   因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支持弹出dialog窗口,但是如果在此基础上,会出现遮罩层越来越多,背景越来越黑的情况. 代码具体如下: (function(){ modal = {}; modal.openDialog = function(url, title, width, height, id){}; modal.close

Bootstrap历练实例:警告框(Alert)插件的方法

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:警告框(Alert)插件的方法</title> <meta charset="utf-8" /> <meta name=&qu