《学习记录》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使用教程

最新文章

热门文章