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 17 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
前端canvas中物体边框和控制点的实现示例
Aug 05 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中长文章分页显示实现代码
2012/09/29 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Python断言assert的用法代码解析
2018/02/03 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
教师评优的个人自我评价分享
2013/09/19 职场文书
幼师专业毕业生自荐信
2013/09/29 职场文书
授权委托书怎么写
2014/04/03 职场文书
社区班子对照检查材料
2014/08/27 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
小学生法制教育心得体会
2016/01/14 职场文书