3

ng-bootstrap 公式サイトのドキュメントに従って、Angular 2 プロジェクトで ng-bootstrap を使用しようとしています。

私がやったことは次のとおりです。

  1. npm install bootstrap@4.0.0-alpha.4
  2. ルートの /bootstrap ディレクトリに移動して実行npm installし、package.json にリストされているローカルの依存関係をインストールします。
  3. ルート プロジェクトに再度移動して実行します。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 {
}

ただし、プロジェクトでプルレフトなどのブートストラップ スタイルを使用することはまだできません。

情報については、angular-cli v1.0.0-beta.15 を webpack で使用しています。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

4

私は理解しました。次のように、実際には angular-cli github ページのGlobal Libray Installationのセクションにも記載されています。

一部の JavaScript ライブラリは、グローバル スコープに追加する必要があり、script タグ内にあるかのようにロードされます。apps[0].scriptsと のapps[0].stylesプロパティを使用してこれを行うことができますangular-cli.json。

例として、 Boostrap 4を使用するには、次のことを行う必要があります。

最初に次から Bootstrap をインストールしnpmます。

$ 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 がアプリで動作するはずです。

于 2016-09-25T11:32:35.687 に答える
4

デコレータのインポートでは、このように 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 { }
于 2017-01-24T23:49:29.563 に答える