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> 類，包含兩個參數：
T 外部傳參給模態(tài)框的類型。
T1 模態(tài)框返回值類型。
因此，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';
//這種模態(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.內置彈框
(1)demo目錄
--------app.component.ts
--------app.component.html
--------app.module.ts
(2)demo代碼
內置彈框也包括 alert confirm prompt 三種形態(tà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()">內置</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">第二種模態(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)框的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本文主要介紹AngularJS XHR和依賴注入，這里整理了詳細資料和示例代碼，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結合實例形式分析了ngCookies模塊與get和put方法進行cookie讀寫操作的相關實現技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了angular4筆記系列之內置指令小結,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了angularjs實現過濾并替換關鍵字小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據實際業(yè)務需求做相應調整。2017-06-06
這篇文章主要介紹了AngularJs實現聊天列表實時刷新功能,需要的朋友可以參考下2017-06-06
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現代碼,需要的朋友可以參考下2016-10-10
本篇文章主要介紹了詳解AngularJS ng-class樣式切換，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
AngularJS基礎 ng-mouseenter 指令示例代碼
本文主要介紹AngularJS ng-mouseenter 指令,這里對ng-mouseenter 指令基礎資料做了詳細整理,并附代碼實例,有需要的小伙伴可以參考下2016-08-08