使用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">

那应该是您开始所需要的全部