ng2学习笔记之bootstrap中的component使用教程


Posted in Javascript onMarch 09, 2017

 前序:

现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境;

相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html

正文:

以图片轮播组件carousel为例:

首先安装好ng2-bootstrap,bootstrap

npm install ng2-bootstrap bootstrap --save

在需要用到的模块中导入

import { CarouselModule } from 'ng2-bootstrap'
@NgModule({
 imports: [
  CarouselModule.forRoot()
 ],
})
export class HeaderModule { }

然后,有很重要一点,不要忘记引入了bootstroop.min.css文件;

接着,在组件的html中写入

<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
 <slide *ngFor="let slidez of slides;">
  <img [src]="slidez" >
 </slide>
</carousel>

以上所述是小编给大家介绍的ng2学习笔记之bootstrap中的component使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
js实现年月日表单三级联动
Apr 17 #Javascript
js实现3D图片展示效果
Mar 09 #Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
js编写选项卡效果
2017/05/23 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
学校门卫工作职责
2013/12/07 职场文书
优秀实习生感言
2014/03/01 职场文书
爽歪歪广告词
2014/03/20 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
违章停车检讨书
2014/10/21 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
建国大业观后感
2015/06/01 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js