当前位置：首页 > 资讯 > 技术文档

ng2学习笔记之bootstrap中的component使用教程

时间：2021-02-08 00:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：ng2学习笔记之bootstrap中的component使用教程

[b] 前序：[/b] 现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境；相关内容请前往：[url=https://angular.cn/docs/ts/latest/cli-quickstart.html]https://angular.cn/docs/ts/latest/cli-quickstart.html[/url] [b]正文：[/b] 以图片轮播组件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使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：easyUI实现类似搜索框关键词自动提示功能示例代码
下一篇：AngularJS学习第一篇 AngularJS基础知识

资讯排行榜
更多>>