javascript - 使用 npm 让 ng-bootstrap 为 angular cli 元素工作

Question

我正在尝试使用带有 ng-bootstrap 的 Angular CLI 来设置一个元素在职的。但是，我根本无法让这种风格发挥作用。这是我采取的确切步骤(这是从入门页面开始的步骤)

1. 使用 - ng new testApp 创建一个新元素
2. 根据 ng-bootstrap 的入门页面，我需要预装 bootstrap 4。所以我运行 npm install bootstrap@4.0.0-alpha.6
3. 然后我运行 npm install --save @ng-bootstrap/ng-bootstrap

4. 按照入门指南对我的 app.module.ts 文件执行以下操作

   从“@ng-bootstrap/ng-bootstrap”导入{NgbModule}；

   @NgModule({ 声明:[AppComponent, ...], 导入:[NgbModule.forRoot(), ...], Bootstrap :[AppComponent]})导出类 AppModule {

5. 此时我的设置应该准备就绪。所以我捕获了 Date Picker HTML 和 TS 代码，并将其放入我的 app.component.ts 和 app.compoennt.html 文件中

应用程序组件.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>

1. 运行 ng serve，这是结果

Answer 1

• 你需要在 bootstrap.min.css 的样式中添加 angular-cli.json

  "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 { }