MyException - 我的异常网
当前位置:我的异常网» JavaScript » Angular两种模态框弹出形式

Angular两种模态框弹出形式

www.MyException.Cn  网友分享于:2013-10-27  浏览:0次
Angular两种模态框弹出方式

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

npm install ngx-bootstrap-modal --save

然后在index.html导入bootstrap样式表

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

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

一、弹出方式一(此方法来自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.module.ts

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

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

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!!!' });
    }
}
app.component.ts

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.html

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);
  }
}
detail.component.ts

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.module.ts

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

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

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) => {
                
            });
    }
}
app.component.ts

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.html

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);
  }
}
confirm.component.ts

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.module.ts

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

<div class="container">
  <div class="row">
    <button type="button" class="btn btn-default" (click)="show()">内置</button>
  </div> 
</div>
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(<BuiltInOptions>{
          content: '保存成功',
          icon: 'success',
          size: 'sm',
          showCancelButton: false
      })
    }
}
app.component.ts

二、弹出方式二(此方法来自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.module.ts

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.ts

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>
app.component.html

三、最终效果

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

 

文章评论

程序员都该阅读的书
程序员都该阅读的书
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
一个程序员的时间管理
一个程序员的时间管理
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员和编码员之间的区别
程序员和编码员之间的区别
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
漫画:程序员的工作
漫画:程序员的工作
Java程序员必看电影
Java程序员必看电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
编程语言是女人
编程语言是女人
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
老程序员的下场
老程序员的下场
10个调试和排错的小建议
10个调试和排错的小建议
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
鲜为人知的编程真相
鲜为人知的编程真相
代码女神横空出世
代码女神横空出世
每天工作4小时的程序员
每天工作4小时的程序员
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员必看的十大电影
程序员必看的十大电影
如何成为一名黑客
如何成为一名黑客
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
中美印日四国程序员比较
中美印日四国程序员比较
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
 程序员的样子
程序员的样子
我是如何打败拖延症的
我是如何打败拖延症的
为什么程序员都是夜猫子
为什么程序员都是夜猫子
我的丈夫是个程序员
我的丈夫是个程序员
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员应该关注的一些事儿
程序员应该关注的一些事儿
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有