在Angular4如何添加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>

页面显示结果：

结语：
希望你喜欢！