《Angular2入门系列实践》——如何添加ng-bootstrap插件

配置环境

1.cnpm安装ng-bootstrap模块

cnpm install @ng-bootstrap/ng-bootstrap --save

随后package.json中显示依赖：



2.引入bootstrap样式，js代码

在index.html中直接引入cdn服务器上bootstrap样式

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

在assets文件夹下添加下载好的bootstrap.min.css，并在全局的style.css文件中添加：（当然你需要postcssloader插件）

@import "assets/bootstrap/bootstrap.min.css";

项目实践-添加导航条bootstrap：

1.使用命令工具创建组件navbar:

ng g c navbar

2.navbar.html:

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header" >
<!--屏幕缩小后，折叠按钮出现，只留下“好”这个菜单项-->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">好</a>
</div>
<!--屏幕缩小之后，以下菜单折叠-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">你好</a></li>
<li><a href="#">非常好</a></li>
<li><a href="#">具好</a></li>
</ul>
</div></div>
</nav>

屏幕缩小之后菜单的效果图



屏幕扩大的效果：



项目实践-bootstrap模块中表单formModule：

1.在项目module中引入formModule(我举例是在appModule中引入的)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

组件中使用方式：

<div class="form-group">
<label>用户名：</label>
<input required name="userName" style="width:30%;display:inline" [(ngModel)]="user.userName" #userName="ngModel" type="text" class="form-control" placeholder="请输入用户名...">
<div *ngIf="form.submitted && !userName.valid" class="text-danger">用户名必须输入！</div>
</div>

页面显示结果：



结语：

希望你喜欢！