欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular弹出模态框的两种方式

程序员文章站 2022-03-07 10:39:30
在开始我们的blog之前,我们要先安装ngx-bootstrap-modal npm install ngx-bootstrap-modal --save...

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

npm install ngx-bootstrap-modal --save

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

一、弹出方式一(此方法来自)

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
  })
 }
}

二、弹出方式二(此方法来自)

还是跟上一种方法一样,先安装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弹出模态框的两种方式,希望对大家有所帮助