Angular弹出模态框怎样实现,详细方法是什�
Admin 2022-12-02 群英技术资�
一、弹出方式一(此方法来自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创建一个可以弹出模态框的按�
alert模态框
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弹框的布局
×{{title}}
这是alert弹框 取消 确定
detail.component.ts创建模态框组件,我们需要创建一个组件,然后� ngx-bootstrap-model 帮忙引导启动
对于这个组件需要继� DialogComponent 类,包含两个参数�
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 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创建一个可以弹出模态框的按�
modal模态框
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弹框的布局
×{{title}}
这是confirm弹框 取消 确定
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 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很简单,就一个按�
内置
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( { 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 ){//传入的是一个组� this.modalRef = this.modalService.show(template,{class: 'modal-lg'});//在这里通过BsModalService里面的show方法把它显示出来 }; }
app.component.html
第二种弹出方�第二种模态框
× 第二种模态框弹出方式 确定 取消
三、最终效�
我们将上面所有的弹框全部写在一起,然后效果就是这样�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
vue怎么样生成无限层级树形结构?在实际的项目应用中,常会遇到vue生成树形结构的需求,而这篇文章主要给大家分享的是vue生成无限层级树形结构的内容,对帮助大家更好的了解vue生成树形结构有一定的帮助,接下里跟随小编来学习一下吧�
本篇文章给大家带来了关于JavaScript的相关知识,其中主要为大家介绍了JS Generator函数yield表达式示例详解,Generator函数是ES6提供的一种异步编程解决,下面一起来看一下,希望对大家有帮助�
这篇文章我们来了解Node.js中EventEmitter模块的使用,EventEmitter� Node.js 的内置模块,能提供事件订阅机制,对此下文主要给大家讲讲要怎样使用它,感兴趣的朋友接下来就跟随小编来了解看看吧�
使用javascript创建游戏是最有趣的学习方式。它会让你保持动力,这对于学习 Web 开发等复杂技能至关重要。本文将使用HTML、CSS和 Javascript创建一个井字游戏。感兴趣的童鞋可以关注一�
最简单粗暴的通信方式� Nodejs调用一� Python 脚本,本文详细介绍了Nodejs与Python 双向通信的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078