使用 npm 让 ng-bootstrap 为 angular cli 项目工作

Posted 2023-03-13

【中文标题】使用 npm 让 ng-bootstrap 为 angular cli 项目工作

【英文标题】：Get ng-bootstrap to work for angular cli project with npm

【发布时间】：2017-06-11 13:53:39

【问题描述】：

我正在尝试使用 ng-bootstrap 工作的角度 CLI 设置项目。但是，我根本无法让这种风格发挥作用。这是我采取的确切步骤（这是入门页面中的步骤）

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

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

从'@ng-bootstrap/ng-bootstrap'导入NgbModule；

@NgModule( 声明：[AppComponent, ...], 进口：[NgbModule.forRoot(), ...], 引导程序：[AppComponent] ) 导出类 AppModule

此时我的设置应该已准备就绪。所以我抓取了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>

运行 ng serve，结果如下

【问题讨论】：

您是否在任何地方引用了引导 CSS？如果使用 angular-cli，您可以将其添加到 angular-cli.json 文件中的“脚本”数组中。在您为 angular 2 bootstrap 提供的链接中，它提到 Bootstrap CSS 作为依赖项。

我添加到 angular-cli 并且它有效，谢谢。很惊讶入门指南中没有提到它....

呸……我说的是“脚本”……我的意思是“样式”。无论哪种方式，我都同意。它肯定会避免一些混乱！

【参考方案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  

【讨论】：

我认为您将 ng2-bootstrap（由 Valor 软件制作：valor-software.com/ng2-bootstrap/#）与官方 ng-bootstrap：v4-alpha.getbootstrap.com/getting-started/download/… 混淆了。话虽如此，我认为 OP 可能不包括 CSS 参考。

只需添加 angular-cli.json 对我有用。 @silencedmessage，现在我很困惑....我应该使用官方的 ng-bootstrap 还是 valor ng2-bootstrap？对我来说，它们看起来像同一个框架

我一直想知道...为什么入门页面不指示人们添加到 angular-cli.json 文件中...

两者都是 Bootstrap 的 Angular 2 端口（它是相同的底层 JS/CSS）。一个只是由制作 Bootstrap 的人，另一个是不想等待 Bootstrap 正式准备好的开发人员。我在一个项目中使用 ng2-bootstrap 是因为我们开始时官方还没有准备好。老实说，我不确定两者之间有多大区别。