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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
Vuex的热更替如何实现
Jun 05 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
再说下636单管机
2021/03/02 无线电
PHP 采集程序 常用函数
2008/12/18 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php curl的深入解析
2013/06/02 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
医院党建工作总结2015
2015/05/26 职场文书
AJAX学习笔记
2021/05/18 Javascript
python 命令行传参方法总结
2021/05/25 Python
SQL SERVER触发器详解
2022/02/24 SQL Server
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python