ng bootstrap是一个angular UI bootstrap库，里面包含了一些基本的UI组件（日期选择组件，按钮，下拉框等）。目前的版本为v1.0.0-alpha.14，基于angular2和bootstrap4。因为在项目中要用到弹出窗口，试着尝试了下该库中的motal组件，效果还不错，因此这里做个记录。
基本的TypeScripe类
NgbModal
用来打开motal窗口的服务，可以采用依赖的方式直接注入到我们定义的组件中。该类仅有一个open(content: any, options: NgbModalOptions):NgbModalRef方法，该方法接收一个content参数：该参数包含窗口的内容；和一个可选的options参数：该参数定义了窗口的一些特性，如尺寸、样式、点击背景关闭窗口等。
NgbModalOptions
这是一个接口的定义，有四个属性：
- backdrop: boolean | 'static' 是否为窗口生成一个背景，'static'时生成的背景在点击窗口是不会关闭窗口。
- keyboard: boolean 是否按ESC键时，关闭窗口。
- size: 'lg' | 'sm' 默认是中等大小，lg为大窗口，sm为小窗口。
- windowClass: string 用户自定义的窗口样式。
NgbModalRef
一个新打开的modal窗口引用，NgbModal调用open方法时会返回一个该对象引用，有两个重要的属性和两个方法。
- componentInstance 在open方法中传入的content为组件时的组件实例，若content不为组件是则为 undefined。
- rusult 一个promise对象，窗口关闭和销毁时会触发。
- close 关闭一个窗口，窗口扔存在DOM中。
- dismiss 销毁窗口。
NgbActiveModal
当前打开窗口的引用，包含close和dismiss方法。
modal使用
首先需要angular2及bootstrap4的支持，一般使用npm进行管理。bootstrap也可以直接引入CDN的链接，具体看官网。
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的服务，调用该服务的open方法即可打开窗口。结合组件页面来看：
<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定义了窗口的内容，在不打开窗口的情况下，内容是隐藏的。注意该模板添加了一个content变量，在调用open方法时传入。
2.定义了一个按钮，当点击时调用modal-basic组件的open方法，在该方法中调用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 href="https://ng-bootstrap.github.io/" 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指令用来标记modal窗口在页面中打开的位置。
另外<template ngbModalContainer></template>需要添加到跟组件中，应用才能正常工作。
后记
当然不要忘了把modal-basic组件在模块中声明，这里假设你一了解基本的angular2知识。本文主要翻译在ng-bootstrap的使用手册，建议你直接看原文档。
网友评论