Angular弹出模态框的两种方式

网络编程 2024/11/16 佚名

3 1 2

在开始我们的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,弹出模态框

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Angular弹出模态框的两种方式”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

Angular弹出模态框的两种方式

js 两个日期比较相差多少天的实例

vue使用axios跨域请求数据问题详解

评论“Angular弹出模态框的两种方式”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Angular弹出模态框的两种方式

js 两个日期比较相差多少天的实例

vue使用axios跨域请求数据问题详解

评论“Angular弹出模态框的两种方式”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存