獲取ng-bootstrap爲nil角度cli項目工作

Question

我正在嘗試使用角度CLI與ng-bootstrap工作來設置項目。但是，我無法讓風格工作。下面是我帶的具體步驟（這是從一開始啓動頁面步驟）

1. 創建使用一個新的項目 - 納克新testApp
2. 根據NG-引導的開始頁面，我需要引導程序4預裝。所以我來說NPM安裝bootstrap@4.0.0-alpha.6
3. 然後我跑NPM安裝--save @ NG-引導/ NG-引導

4. 按照新手指南，並做了以下我的應用程序。 module.ts文件

   從'@ ng-bootstrap/ng-bootstrap'導入{NgbModule};

   @NgModule（{ 聲明：AppComponent，...]， 進口：[NgbModule.forRoot（），...]， 引導：AppComponent] }） 出口類的AppModule {}

5. 此時我的設置應該準備好。所以，我搶Date Picker HTML和TS碼，並把它放在我的app.component.ts和app.compoennt.html文件

app.component.ts

import { Component } from '@angular/core'; 
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; 

const now = new Date(); 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    model: NgbDateStruct; 
    date: { year: number, month: number }; 

    selectToday() { 
    this.model = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() }; 
    } 
} 

app.component。 HTML

<p>Simple datepicker</p> 

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker> 

<hr/> 

<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button> 
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button> 
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button> 

<hr/> 

<pre>Month: {{ date.month }}.{{ date.year }}</pre> 
<pre>Model: {{ model | json }}</pre> 

運行納克服務，這是結果

Answer 1

• 你需要在樣式角cli.json添加bootstrap.min.css

  "styles": [ 
      "styles.scss", 
      "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
  ] 
  

• 您需要在app.module.ts導入Ng2BootstrapModule

  @NgModule({ 
  declarations: [AppComponent], 
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes), Ng2BootstrapModule], 
  providers: [], 
  bootstrap: [AppComponent] 
  }) 
  
  export class AppModule { }