《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>

页面显示结果：

结语：
     希望你喜欢！