本文主要介绍了angular弹出模态框的两种方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。
在开始我们的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创建一个可以弹出模态框的按钮
<p class="container">
<p class="row">
<button type="button" class="btn btn-primary" (click)="showalert()">alert模态框</button>
</p>
</p>
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弹框的布局
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" (click)="close()" >×</button>
<h4 class="modal-title">{{title}}</h4>
</p>
<p class="modal-body">
这是alert弹框
</p>
<p class="modal-footer">
<button type="button" class="btn btn-primary" (click)="close()">取消</button>
<button type="button" class="btn btn-default">确定</button>
</p>
</p>
</p>
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创建一个可以弹出模态框的按钮
<p class="container">
<p class="row">
<button type="button" class="btn btn-primary" (click)="showconfirm()">modal模态框</button>
</p>
</p>
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弹框的布局
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" (click)="close()" >×</button>
<h4 class="modal-title">{{title}}</h4>
</p>
<p class="modal-body">
这是confirm弹框
</p>
<p class="modal-footer">
<button type="button" class="btn btn-primary" (click)="close()">取消</button>
<button type="button" class="btn btn-default">确定</button>
</p>
</p>
</p>
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很简单，就一个按钮
<p class="container">
<p class="row">
<button type="button" class="btn btn-default" (click)="show()">内置</button>
</p>
</p>
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
<p class="container">
<p class="row">
<button type="button" class="btn btn-success" (click)="showsecond(template)">第二种弹出方式</button>
</p>
</p>
<!--第二种弹出方法的组件-->
<template #template>
<p 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>
</p>
<p class="modal-body tips-modal-body">
<p class="tips-contain"><span>第二种模态框弹出方式</span></p>
</p>
<p 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>
</p>
</template>
三、最终效果
我们将上面所有的弹框全部写在一起，然后效果就是这样的
相关推荐：
bootstrap模态框不垂直居中如何解决
bootstrap模态框嵌套、tabindex属性、去除阴影的方法
详解bootstrap3-dialog-master模态框用法
以上就是两种angular弹出模态框的方式的详细内容。