现在angular2已经除了集成的angular-cli，建议大家可以基于这个来快速开发ng2的项目，不用自己再搭建环境。接下来通过本文给大家介绍 bootstrap中的component使用教程,需要的朋友可以参考下
在Angular 2（以下简称ng2）的开发过程中，Bootstrap组件的使用可以极大地提升应用的界面美观度和用户体验。Angular CLI的出现使得ng2项目的搭建变得简单快捷，避免了手动配置的繁琐过程。本教程将详细介绍如何在ng2项目中集成并使用Bootstrap的组件，以图片轮播组件carousel为例。
为了在ng2项目中使用Bootstrap，我们需要安装两个依赖库：ng2-bootstrap和Bootstrap本身。可以通过以下命令行操作进行安装：
```bash
npm install ng2-bootstrap bootstrap --save
```
这将在项目中添加ng2-bootstrap和bootstrap的包，并将其添加到package.json文件的dependencies列表中，以便于项目构建时能够正确引用。
在安装完成后，我们需要在项目的相应模块中导入Bootstrap的组件。以Carousel组件为例，我们应导入`CarouselModule`，并将其添加到`imports`数组中。假设我们有一个`HeaderModule`，可以这样操作：
```typescript
import { CarouselModule } from 'ng2-bootstrap';
@NgModule({
imports: [
CarouselModule.forRoot()
],
})
export class HeaderModule { }
```
`forRoot()`方法是将该模块作为根模块使用，确保全局范围内可以使用Carousel组件。
接下来，确保在项目的样式表文件（如styles.css）中引入Bootstrap的CSS文件。通常，Bootstrap的CSS文件位于node_modules目录下的bootstrap文件夹中，可以引入如下：
```css
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
```
现在，我们可以开始在组件模板中使用Carousel组件了。创建一个carousel容器，并设置一些基本属性，例如轮播间隔时间`interval`、是否允许循环播放`noWrapSlides`以及当前活动幻灯片索引`activeSlide`：
```html
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
</carousel>
```
接着，使用`*ngFor`指令动态生成每个幻灯片。在`slide`元素中，插入图片并设置其源`src`：
```html
<slide *ngFor="let slidez of slides;">
<img [src]="slidez">
</slide>
```
这里的`slides`应该是一个包含图片URL的数组，可以在组件类中定义：
```typescript
slides = [
'path/to/image1.jpg',
'path/to/image2.jpg',
// 更多图片...
];
```
至此，一个基本的Bootstrap Carousel组件已经在ng2项目中实现。你可以根据需求调整轮播间隔时间、是否循环播放等参数，或者添加更多自定义交互和样式。
在实际开发中，ng2与Bootstrap的结合提供了丰富的UI组件，包括模态框、下拉菜单、导航条等，大大提升了开发效率。记得在遇到问题时，可以查阅官方文档（如https://angular.cn/docs/ts/latest/cli-quickstart.html）或社区资源获取帮助。
通过上述步骤，开发者可以轻松地在ng2项目中集成Bootstrap组件，实现美观且功能丰富的用户界面。不断学习和实践，将使你在ng2开发中更加得心应手。
