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获取链接参数的方法
Jan 01 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
微信小程序 教程之事件
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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python递归全排列实现方法
2018/08/18 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
会计专业毕业生求职信
2014/07/04 职场文书
党员自我剖析材料
2014/08/31 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
政府会议通知范文
2015/04/15 职场文书
人民检察院起诉书
2015/05/20 职场文书
运动会200米广播稿
2015/08/19 职场文书
《海上日出》教学反思
2016/02/23 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题