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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
js有序数组的连接问题
Oct 01 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
微信小程序实现watch监听
Jun 04 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
python装饰器使用方法实例
2013/11/21 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Django密码系统实现过程详解
2019/07/19 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
出纳岗位职责模板
2013/11/27 职场文书
博士生求职信
2014/07/06 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python