使用ng-bootstrap正確設置angular 2

Question

作為angular和Bootstrap的n00b，以及對node js而言相對較新的一種，我試圖從此處使用webpack入門套件來建立一個干凈的基礎（我希望）：

https://github.com/AngularClass/angular2-webpack-starter

以及來自此處的Angular 2的官方Bootstrap 4： https ： //ng-bootstrap.github.io/#/getting-started

到目前為止，我已經將一些導入添加到了webapp入門工具包中：

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.9",
"bootstrap": "^4.0.0-alpha.5",
"tslint": "^3.15.1",

現在我的問題是，我不知道該怎么做以及從ng-bootstrap安裝文檔中將提到的代碼片段放在哪里：

https://ng-bootstrap.github.io/#/getting-started

我要的是：

1）有關這些代碼段的用途的說明，以及將這些內容放在上面鏈接的具體入門工具包項目中的位置（因為我願意學習，但是對於n00b來說，該信息太短了）。

我的意思是，例如AppComponent什么？ 它是不確定的-我不知道該指的是什么。

2）現在該項目中的Bootstrap實際上在哪里？

對於知道這些事情的人來說，這些可能是愚蠢的問題。 但是作為一個新手，我現在完全迷失了。

非常感謝您的提前幫助。

從提到的ng-bootstrap安裝文檔復制：

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

應用程序中的其他模塊可以簡單地導入NgbModule ：

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...]
})
export class OtherModule {
}

Answer 1

查看app.module文件。 您應該看到@NgModule() AppModule 。 這是AppModule發布的AppModule 。 您應該確保在將NgbModule添加到調用forRoot的導入中時，就像您的示例一樣。

就第二個示例而言，現在僅使用AppModule即可構建整個應用程序。 但是隨着應用程序的增長，您可能需要將其分解為較小的模塊，在這種情況下，對於其他模塊，您只需將NgbModule添加到imports （ 不帶 forRoot() ）。 forRoot()僅在添加到根應用程序模塊時被調用。 有關使用模塊的更多信息，您應該查看有關模塊的文檔

就Bootstrap而言，ng-bootstrap只是組件庫，這些組件的樣式基於實際的Bootstrap CSS。 您已經安裝了Bootstrap，但是還需要將CSS添加到應用程序中。 您可以嘗試執行所有這些復雜的步驟 ，但是，如果您只是想開始，那么最好現在就使用CDN。 在您的index.html中，只需添加

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
      crossorigin="anonymous">

那應該是您開始所需要的全部