富贵资源网 Design By www.hznty.com

 前序:

现在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使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com