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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JS倒计时代码汇总
Nov 25 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
简单实现js进度条加载效果
2020/03/25 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
python最长回文串算法
2018/06/04 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python高斯消除矩阵
2019/01/02 Python
详解python中的数据类型和控制流
2019/08/08 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
如何进行Linux分区优化
2016/09/13 面试题
财务人员的自我评价范文
2014/03/03 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
护士求职简历自我评价
2015/03/10 职场文书
百万英镑观后感
2015/06/09 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL