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中clone对象详解
Dec 03 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
angular+webpack2实战例子
May 23 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
Openlayers实现距离面积测量
Sep 28 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
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
深入理解Promise.all
2018/08/08 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
生产总经理岗位职责
2013/12/19 职场文书
五型班组建设方案
2014/02/10 职场文书
颁奖晚会主持词
2014/03/25 职场文书
学雷锋的心得体会
2014/09/04 职场文书
求职信范文怎么写
2015/03/19 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
使用Python拟合函数曲线
2022/04/14 Python
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技