如何将 ng-bootstrap 与 AngularJS 2 一起使用（使用 angular-cli v1b15）？

Question

我一直在尝试按照 ng-bootstrap 官方网站上的文档在我的 Angular 2 项目中使用 ng-bootstrap。

我所做的如下：

npm install bootstrap@4.0.0-alpha.4
导航到根 /bootstrap 目录和运行 npm install 安装 package.json.
再次导航到根项目并运行 npm install --save @ng-bootstrap/ng-bootstrap

之后，我在模块中导入如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';


import { AppComponent } from './app.component';
import { PageModule } from "./page/page.module";

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgbModule,
        PageModule,
        routing
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

但是，我仍然无法在我的项目中使用 bootstrap 样式，例如左拉。

有关信息，我正在使用 angular-cli v1.0.0-beta.15 和 webpack。

我该如何解决这个问题？

Answer 1

我想通了。实际上在angular-cli github页面中也有说明，在Global Libray Installation部分，如下：

一些javascript库需要添加到全局作用域，并像加载一样他们在脚本标签中。我们可以使用 apps[0].scripts 和 apps[0].styles angular-cli.json.

的属性

例如，要使用 Boostrap 4 这是你需要做什么：

首先从 npm 安装 Bootstrap:

$ npm install bootstrap@next

然后将需要的脚本文件添加到apps[0].scripts。

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

最后将 Bootstrap CSS 添加到 apps[0].styles 数组：

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

重新启动 ng serve 如果你是运行它，Bootstrap 4 应该正在处理你的应用程序。

Answer 2

在装饰器的导入中，您需要像这样调用 ngBootstrap

NgbModule.forRoot()

应用模块示例

import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

// Add This
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

如何将 ng-bootstrap 与 AngularJS 2 一起使用（使用 angular-cli v1b15）？

How to use ng-bootstrap with AngularJS 2 (using angular-cli v1b15)?

bootstrap-4

ng-bootstrap

angular