ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用

ng bootstrap是一个angular UI bootstrap库，里面包含了一些基本的UI组件(日期选择组件，按钮，下拉框等)。目前的版本为v1.0.0-alpha.14，基于angular2和bootstrap4。因为在项目中要用到弹出窗口，试着尝试了下该库中的motal组件，效果还不错，因此这里做个记录。

基本的TypeScripe类

用来打开motal窗口的服务，可以采用依赖的方式直接注入到我们定义的组件中。该类仅有一个open(content: any, options: NgbModalOptions):NgbModalRef方法，该方法接收一个content参数：该参数包含窗口的内容；和一个可选的options参数：该参数定义了窗口的一些特性，如尺寸、样式、点击背景关闭窗口等。

这是一个接口的定义，有四个属性：

backdrop: boolean | 'static' 是否为窗口生成一个背景，'static'时生成的背景在点击窗口是不会关闭窗口。

keyboard: boolean 是否按ESC键时，关闭窗口。

size: 'lg' | 'sm' 默认是中等大小，lg为大窗口，sm为小窗口。

windowClass: string 用户自定义的窗口样式。

一个新打开的modal窗口引用，NgbModal调用open方法时会返回一个该对象引用，有两个重要的属性和两个方法。

componentInstance 在open方法中传入的content为组件时的组件实例，若content不为组件是则为 undefined。

rusult 一个promise对象，窗口关闭和销毁时会触发。

close 关闭一个窗口，窗口扔存在DOM中。

dismiss 销毁窗口。

当前打开窗口的引用，包含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方法即可打开窗口。结合组件页面来看：

×

Modal title

One fine body…

Close

Launch demo modal

---

{{closeResult}}

1.template定义了窗口的内容，在不打开窗口的情况下，内容是隐藏的。注意该模板添加了一个content变量，在调用open方法时传入。

2.定义了一个按钮，当点击时调用modal-basic组件的open方法，在该方法中调用NgbModal的open方法，打开窗口。

4.使用modal窗口

---

This is a demo plnkr forked from the ng-bootstrap project: Angular 2 powered Bootstrap.

Visit https://ng-bootstrap.github.io for more widgets and demos.

---

注意添加元素，ngbModalContainer指令用来标记modal窗口在页面中打开的位置。

另外需要添加到跟组件中，应用才能正常工作。

后记

当然不要忘了把modal-basic组件在模块中声明，这里假设你一了解基本的angular2知识。本文主要翻译在ng-bootstrap的使用手册，建议你直接看原文档。