在Angular4如何添加ng-bootstrap插件

配置环境
1.cnpm安装ng-bootstrap模块

cnpm install @ng-bootstrap/ng-bootstrap --save@H_419_17@ 
 
 
 随后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>@H_419_17@ 
 
 在assets文件夹下添加下载好的bootstrap.min.css，并在全局的style.css文件中添加：（当然你需要postcssloader插件）
 
 
@import "assets/bootstrap/bootstrap.min.css";@H_419_17@ 
  
 
项目实践-添加导航条bootstrap：
 
 
1.使用命令工具创建组件navbar:
 
 
ng g c navbar@H_419_17@ 
 
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>@H_419_17@ 
  
 
屏幕缩小之后菜单的效果图 
  
 屏幕扩大的效果： 
 
 
 
项目实践-bootstrap模块中表单formModule： 
 1.在项目module中引入formModule(我举例是在appModule中引入的)
 
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { httpR_643_11845@odule } from '@angular/http';

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

@NgModule({
  declarations: [
    AppComponent,LoginComponent
  ],imports: [
    BrowserModule,FormsModule,httpR_643_11845@odule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }@H_419_17@ 
 
组件中使用方式：
 
 
<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>@H_419_17@ 
 
页面显示结果： 
 
 
 
结语： 
 希望你喜欢！