Question

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

我所做的如下：

npm install bootstrap@4.0.0-alpha.4
导航到root / 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 {
}

但是，我仍然无法在项目中使用引导程序样式，例如pull-left。

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

我该如何解决这个问题？

Answer 1

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

需要将一些javascript库添加到全局范围，并按原样加载他们是一个脚本标签。我们可以使用apps[0].scripts和。{ apps[0].styles的{{1}}属性。

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

首先从angular-cli.json安装Bootstrap：

npm

然后将所需的脚本文件添加到$ npm install bootstrap@next。

apps[0].scripts

最后将Bootstrap CSS添加到"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],数组：

apps[0].styles

如果您正在运行它，请重新启动"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],，并且Bootstrap 4应该正在运行你的应用。

Answer 2

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

NgbModule.forRoot()

示例AppModule

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

如何在AngularJS 2中使用ng-bootstrap（使用angular-cli v1b15）？

2 个答案: