ng2学习笔记之bootstrap中的component使用教程
前序:
现在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使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
AngularJs 利用百度地图API 定位当前位置 获取地址信息
本文主要介绍了AngularJs 利用百度地图API 定位当前位置 获取地址信息的方法步骤。具有一定的参考价值,下面跟着小编一起来看下吧2017-01-01AngularJS中directive指令使用之事件绑定与指令交互用法示例
这篇文章主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下2016-11-11详解angularJs中关于ng-class的三种使用方式说明
本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06
最新评论