Angular弹出模态框的两种方式


Posted in Javascript onOctober 19, 2017

在开始我们的blog之前,我们要先安装ngx-bootstrap-modal

npm install ngx-bootstrap-modal --save

不然我们的模态框效果会难看到你想吐

一、弹出方式一(此方法来自https://github.com/cipchk/ngx-bootstrap-modal)

1.alert弹框

(1)demo目录

--------app.component.ts

--------app.component.html

--------app.module.ts

--------detail(文件夹)

------------detail.component.ts

------------detail.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//这种模态框只需要导入下面这两个
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html创建一个可以弹出模态框的按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showAlert()">alert模态框</button>
 </div> 
</div>

app.component.ts编写这个按钮的动作showAlert()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { DetailComponent } from './detail/detail.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 } 
 showAlert() {
  this.dialogService.addDialog(DetailComponent, { title: 'Alert title!', message: 'Alert message!!!' });
 }
}

detail.component.html编写alert弹框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   这是alert弹框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">确定</button>
  </div>
 </div>
</div>

detail.component.ts创建模态框组件,我们需要创建一个组件,然后由 ngx-bootstrap-model 帮忙引导启动
对于这个组件需要继承 DialogComponent<T, T1> 类,包含两个参数:

T 外部传参给模态框的类型。

T1 模态框返回值类型。

因此,DialogService应该是DialogComponent的一个构造函数的参数。

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface AlertModel {
 title: string;
 message: string;
}
@Component({
 selector: 'alert',
 templateUrl: './detail.component.html',
 styleUrls: ['./detail.component.css']
})
export class DetailComponent extends DialogComponent<AlertModel, null> implements AlertModel {
 title: string;
 message: string;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
}

2.confirm弹框

(1)demo目录

--------app.component.ts
--------app.component.html
--------app.module.ts
--------confirm(文件夹)
------------confirm.component.ts
------------confirm.component.html

(2)demo代码

app.module.ts导入必要的BootstrapModalModule 和ModalModule ,再注册它们,这些都跟alert弹框一样,因为这些都是方法一的弹出方式

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//这种模态框只需要导入下面这两个
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
@NgModule({
 declarations: [
 AppComponent,
 DetailComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule
 ],
 providers: [],
 entryComponents: [
 DetailComponent
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html创建一个可以弹出模态框的按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" (click)="showConfirm()">modal模态框</button>
 </div> 
</div>

app.component.ts编写这个按钮的动作showConfirm()

import { Component } from '@angular/core';
import { DialogService } from "ngx-bootstrap-modal";
import { ConfirmComponent } from './confirm/confirm.component'
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService,private modalService: BsModalService) {
 }
 showConfirm() {
  this.dialogService.addDialog(ConfirmComponent, {
   title: 'Confirmation',
   message: 'bla bla'
  })
   .subscribe((isConfirmed) => {
   });
 }
}

confirm.component.html编写confirm弹框的布局

<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" (click)="close()" >×</button>
   <h4 class="modal-title">{{title}}</h4>
  </div>
  <div class="modal-body">
   这是confirm弹框
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" (click)="close()">取消</button>
   <button type="button" class="btn btn-default">确定</button>
  </div>
 </div>
</div>

confirm.component.ts创建模态框组件

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from 'ngx-bootstrap-modal';
export interface ConfirmModel {
 title:string;
 message:any;
}
@Component({
 selector: 'confirm',
 templateUrl: './confirm.component.html',
 styleUrls: ['./confirm.component.css']
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
 title: string;
 message: any;
 constructor(dialogService: DialogService) {
 super(dialogService);
 }
 confirm() {
 // on click on confirm button we set dialog result as true,
 // ten we can get dialog result from caller code
 this.close(true);
 }
 cancel() {
 this.close(false);
 }
}

3.内置弹框

(1)demo目录

--------app.component.ts

--------app.component.html
--------app.module.ts

(2)demo代码

内置弹框也包括 alert confirm prompt 三种形态,都有一些内置的样式

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 BootstrapModalModule,
 ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html很简单,就一个按钮

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-default" (click)="show()">内置</button>
 </div> 
</div>

app.component.ts很简单,连组件的布局都不用写,传入一些参数比如图标icon,大小size等

import { Component } from '@angular/core';
import { DialogService, BuiltInOptions } from "ngx-bootstrap-modal";
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 constructor(public dialogService: DialogService) {
 }
 show(){
  this.dialogService.show(<BuiltInOptions>{
   content: '保存成功',
   icon: 'success',
   size: 'sm',
   showCancelButton: false
  })
 }
}

二、弹出方式二(此方法来自https://valor-software.com/ngx-bootstrap/#/modals)

还是跟上一种方法一样,先安装ngx-bootstrap-modal,然后导入bootstrap样式表

1.demo目录

--------app.component.ts
--------app.component.html
--------app.module.ts

2.demo代码

app.module.ts导入相应模块,并且注册它们

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 ModalModule.forRoot()
 ],
 providers: [],
 entryComponents: [
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 public modalRef: BsModalRef;
 constructor(private modalService: BsModalService) {
 }
 showSecond(template: TemplateRef<any>){//传入的是一个组件
  this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在这里通过BsModalService里面的show方法把它显示出来
 };
}

app.component.html

<div class="container">
 <div class="row">
 <button type="button" class="btn btn-success" (click)="showSecond(Template)">第二种弹出方式</button>
 </div> 
</div>
<!--第二种弹出方法的组件-->
<template #Template>
 <div class="modal-header tips-modal-header">
 <h4 class="modal-title pull-left">第二种模态框</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 tips-modal-body">
 <div class="tips-contain"><span>第二种模态框弹出方式</span></div>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">确定</button>
  <button type="button" class="btn btn-default" (click)="modalRef.hide()">取消</button>
 </div>
</template>

三、最终效果

我们将上面所有的弹框全部写在一起,然后效果就是这样的

Angular弹出模态框的两种方式

总结

以上所述是小编给大家介绍的Angular弹出模态框的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 #Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
You might like
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
vue实现文字加密功能
2019/09/27 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python变量不能以数字打头详解
2016/07/06 Python
Python构建网页爬虫原理分析
2017/12/19 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
在keras里实现自定义上采样层
2020/06/28 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
蔬菜基地的创业计划书
2014/01/06 职场文书
单身联谊活动方案
2014/01/29 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
深入浅析Django MTV模式
2021/09/04 Python