ng bootstrap是一個angular UI bootstrap庫上鞠，里面包含了一些基本的UI組件（日期選擇組件，按鈕嘲驾，下拉框等）绢要。目前的版本為v1.0.0-alpha.14，基于angular2和bootstrap4蓄拣。因?yàn)樵陧椖恐幸玫綇棾龃翱谘镄椋囍鴩L試了下該庫中的motal組件，效果還不錯球恤，因此這里做個記錄辜昵。
基本的TypeScripe類
NgbModal
用來打開motal窗口的服務(wù)，可以采用依賴的方式直接注入到我們定義的組件中咽斧。該類僅有一個open(content: any, options: NgbModalOptions):NgbModalRef方法堪置，該方法接收一個content參數(shù)：該參數(shù)包含窗口的內(nèi)容；和一個可選的options參數(shù)：該參數(shù)定義了窗口的一些特性张惹，如尺寸舀锨、樣式、點(diǎn)擊背景關(guān)閉窗口等宛逗。
NgbModalOptions
這是一個接口的定義坎匿，有四個屬性：
- backdrop: boolean | 'static' 是否為窗口生成一個背景，'static'時生成的背景在點(diǎn)擊窗口是不會關(guān)閉窗口。
- keyboard: boolean 是否按ESC鍵時替蔬，關(guān)閉窗口告私。
- size: 'lg' | 'sm' 默認(rèn)是中等大小，lg為大窗口承桥，sm為小窗口驻粟。
- windowClass: string 用戶自定義的窗口樣式。
NgbModalRef
一個新打開的modal窗口引用凶异，NgbModal調(diào)用open方法時會返回一個該對象引用蜀撑，有兩個重要的屬性和兩個方法。
- componentInstance 在open方法中傳入的content為組件時的組件實(shí)例剩彬，若content不為組件是則為 undefined屯掖。
- rusult 一個promise對象，窗口關(guān)閉和銷毀時會觸發(fā)襟衰。
- close 關(guān)閉一個窗口贴铜，窗口扔存在DOM中。
- dismiss 銷毀窗口瀑晒。
NgbActiveModal
當(dāng)前打開窗口的引用绍坝，包含close和dismiss方法。
modal使用
首先需要angular2及bootstrap4的支持苔悦，一般使用npm進(jìn)行管理轩褐。bootstrap也可以直接引入CDN的鏈接，具體看官網(wǎng)玖详。
1.安裝ng bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap
2.引入NgbModule模塊
在angular2根模塊中引入時把介，需添加forRoot()方法
imports: [NgbModule.forRoot(), ...]
特性模塊中，則不需要
imports: [NgbModule, ...]
3.編寫一個窗口模塊組件modal-basic.compont.ts
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal-basic',
templateUrl: './modal-basic.component.html',
styleUrls: ['./modal-basic.component.css']
})
export class ModalBasicComponent implements OnInit {
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
ngOnInit() {
}
}
組件包含一個NgbModal的服務(wù)蟋座，調(diào)用該服務(wù)的open方法即可打開窗口拗踢。結(jié)合組件頁面來看：
<template #content let-c="close">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>
1.template定義了窗口的內(nèi)容，在不打開窗口的情況下向臀，內(nèi)容是隱藏的巢墅。注意該模板添加了一個content變量，在調(diào)用open方法時傳入券膀。
2.定義了一個按鈕君纫，當(dāng)點(diǎn)擊時調(diào)用modal-basic組件的open方法，在該方法中調(diào)用NgbModal的open方法芹彬，打開窗口蓄髓。
4.使用modal窗口
<div class="container-fluid">
<hr>
<p>
This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular 2 powered Bootstrap.
Visit <a target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
</p>
<hr>
<template ngbModalContainer></template>
<app-modal-basic></app-modal-basic>
</div>
注意添加
<template ngbModalContainer></template>元素，ngbModalContainer指令用來標(biāo)記modal窗口在頁面中打開的位置舒帮。
另外<template ngbModalContainer></template>需要添加到跟組件中会喝，應(yīng)用才能正常工作眨唬。
后記
當(dāng)然不要忘了把modal-basic組件在模塊中聲明，這里假設(shè)你一了解基本的angular2知識好乐。本文主要翻譯在ng-bootstrap的使用手冊，建議你直接看原文檔瓦宜。
