Angular彈出模態(tài)框的兩種方式
更新時間：2017年10月19日 08:20:22 作者：fyk曩昔
這篇文章主要介紹了Angular彈出模態(tài)框的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
在開始我們的blog之前，我們要先安裝ngx-bootstrap-modal
npm install ngx-bootstrap-modal --save
不然我們的模態(tài)框效果會難看到你想吐
一、彈出方式一(此方法來自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';
//這種模態(tài)框只需要導入下面這兩個
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創(chuàng)建一個可以彈出模態(tài)框的按鈕
<div class="container"> <div class="row"> <button type="button" class="btn btn-primary" (click)="showAlert()">alert模態(tài)框</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創(chuàng)建模態(tài)框組件，我們需要創(chuàng)建一個組件，然后由 ngx-bootstrap-model 幫忙引導啟動
對于這個組件需要繼承 DialogComponent<T, T1> 類，包含兩個參數(shù)：
T 外部傳參給模態(tài)框的類型。
T1 模態(tài)框返回值類型。
因此，DialogService應該是DialogComponent的一個構造函數(shù)的參數(shù)。
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';
//這種模態(tài)框只需要導入下面這兩個
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創(chuàng)建一個可以彈出模態(tài)框的按鈕
<div class="container"> <div class="row"> <button type="button" class="btn btn-primary" (click)="showConfirm()">modal模態(tài)框</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創(chuàng)建模態(tài)框組件
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.內(nèi)置彈框
(1)demo目錄
--------app.component.ts
--------app.component.html
--------app.module.ts
(2)demo代碼
內(nèi)置彈框也包括 alert confirm prompt 三種形態(tài)，都有一些內(nèi)置的樣式
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()">內(nèi)置</button> </div> </div>
app.component.ts很簡單，連組件的布局都不用寫，傳入一些參數(shù)比如圖標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">第二種模態(tài)框</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>第二種模態(tài)框彈出方式</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彈出模態(tài)框的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本篇文章主要介紹了Angular4學習筆記之實現(xiàn)綁定和分包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Angular ng-repeat指令實例以及擴展部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
掌握Queries設計模式優(yōu)化Angular應用開發(fā)技巧
這篇文章主要介紹了掌握Queries設計模式優(yōu)化Angular應用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
本篇文章主要介紹了詳解angularJS+Ionic移動端圖片上傳的解決辦法 ，具有一定的參考價值，有需要的可以了解一下2017-09-09
使用Angular CLI生成 Angular 5項目教程詳解
這篇文章主要介紹了使用Angular CLI生成 Angular 5項目的教程詳解 ,需要的朋友可以參考下2018-03-03
對angularJs中controller控制器scope父子集作用域的實例講解
今天小編就為大家分享一篇對angularJs中controller控制器scope父子集作用域的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS實現(xiàn)的錨點樓層跳轉功能,涉及AngularJS事件響應實現(xiàn)錨點跳轉功能的相關操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了AngularJs Javascript MVC 框架的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
AngularJS獲取json數(shù)據(jù)的方法詳解
這篇文章主要介紹了AngularJS獲取json數(shù)據(jù)的方法,結合實例形式詳細分析了AngularJS獲取json數(shù)據(jù)的詳細步驟、操作技巧與相關注意事項,需要的朋友可以參考下2017-05-05
Commands Queries設計模式提高Angular應用性能及可維護性
在Angular應用開發(fā)領域,Commands and Queries 設計模式是一個關鍵的概念,它有助于有效地管理應用程序的狀態(tài)和與后端的交互,本文將深入探討這一設計模式的核心要點,并通過實際示例來加以說明2023-10-10