Angular2中Bootstrap界面库ng-bootstrap详解


Posted in Javascript onOctober 18, 2016

准备 Angular 2 环境

ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境。

使用 ng-bootstrap

下载 ng-bootstrap

ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式:

npm install bootstrap@4.0.0-alpha.2 --save

接着下载 ng-bootstrap , 同样使用 npm 包的形式:

npm install @ng-bootstrap/ng-bootstrap --save

修改 systemjs.config.js

现在需要修改一下 systemjs.config.js 文件, 让 SystemJS 能够正确加载 ng-bootstrap :

// map tells the System loader where to look for things
var map = {
 'app':      'dist', // 'dist',
 '@angular':     'node_modules/@angular',
 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
 'rxjs':      'node_modules/rxjs',
 // add ng-bootstrap location map 
 '@ng-bootstrap':    'node_modules/@ng-bootstrap'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
 'app': { main: 'main.js', defaultExtension: 'js', format: 'amd' },
 'rxjs': { defaultExtension: 'js' },
 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
 // add ng-bootstrap package config
 '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
};

修改 index.html

index.html 文件也要修改一下, 把 bootstrap 的样式表关联进来:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>

修改 app.component.ts

还需要修改一下 app.component.ts 文件, 导入 ng-bootstrap 的指令:

import { Component, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { provideRouter, ROUTER_DIRECTIVES } from '@angular/router';
// import ng-bootstrap directives
import { NGB_DIRECTIVES, NGB_PRECOMPILE } from '@ng-bootstrap/ng-bootstrap';

import { routes } from './app.routes';

@Component({
 //moduleId: module.id,
 selector: 'app',
 providers: [ HTTP_PROVIDERS ],
 templateUrl: 'dist/app.component.html',
 styleUrls: ['dist/app.component.css'],
 // ng-bootstrap required precompile directives
 precompile: [NGB_PRECOMPILE],
 // add ng-bootstrap directives to app
 directives: [
  ROUTER_DIRECTIVES, NGB_DIRECTIVES
 ],
 pipes: []
})
export class AppComponent implements OnInit {

 ngOnInit() {
 }

}

ng-bootstrap 以指令 (directive) 的形式提供组件, 方便在 html 视图中使用, 选择器 (selector) 使用同一的前缀 ngb , 类名则统一使用 Ngb 前缀。

接下来就可以使用 ng-bootstrap 的组件了, 接下来以 NgbAlert 为例说明 ng-bootstrap 的用法。

NgbAlert 的 selector 是 ngb-alert , 支持的 Input 有 dismissible 和 type , Output 有 close 。

接下来看一个 NgbAlert 的例子:

<p>
 <ngb-alert [dismissible]="false">
 <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </ngb-alert>
</p>

显示效果如下:

Angular2中Bootstrap界面库ng-bootstrap详解

再来一个稍微复杂一点儿的, 在 app.component.ts 文件中添加下面的代码:

export class AppComponent implements OnInit {

 alert: IAlert[];

 ngOnInit() {
  this.alert = [
   {
    id: 1,
    type: 'success',
    message: 'This is an success alert',
   },
   {
    id: 2,
    type: 'info',
    message: 'This is an info alert',
   },
   {
    id: 3,
    type: 'warning',
    message: 'This is a warning alert',
   },
   {
    id: 4,
    type: 'danger',
    message: 'This is a danger alert',
   }
  ];
 }

 closeAlert(alert: IAlert) {
  const index: number = this.alerts.indexOf(alert);
  this.alerts.splice(index, 1);
 }
}

interface IAlert {
 id: number;
 type: string;
 message: string;
}

在对应的 html 文件中添加 *ngFor 指令, 绑定 alerts 数组:

<p *ngFor="let alert of alerts">
 <ngb-alert
  [type]="alert.type"
  (close)="closeAlert(alert)">\{\{ alert.message }}
 </ngb-alert>
</p>

现在得到的效果如下图所示:

Angular2中Bootstrap界面库ng-bootstrap详解

ng-bootstrap 还有更多的组件, 就不一一列举了。

总结

实现 ng-bootstrap 的人还是原来做 angular-ui 的那些人, 可以说配方还是原来的配方, 但是这味道么就跟原来有很大的不同了, 完全切换到了 Angular2 的风格。

不过总的来说, ng-bootstrap 的推出将会极大的推进 Angular 2 在实际项目中的应用, 而不只是停留在 demo 阶段, 因为 AngularJS 1.x 时期, 很多项目都是以 AngularJS + UI-Bootstrap 为基础的, 现在有了 Angular 2 的 ng-bootstrap , 相信已经由很多人蠢蠢欲动了吧!以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
You might like
PHP模拟QQ登录的方法
2015/07/29 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python保存数据到本地文件的方法
2018/06/23 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
在python 中实现运行多条shell命令
2019/01/07 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
抽象类和接口的区别
2012/09/19 面试题
工程班组长岗位职责
2013/12/30 职场文书
新春联欢会主持词
2014/03/24 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python