Question

作为angular和Bootstrap的n00b，以及相对较新的节点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。您应该确保将NgbModule添加到您调用forRoot的导入时，就像您的示例一样。

就第二个示例而言，现在只需使用AppModule即可构建整个应用程序。但随着应用程序的增长，您可能希望将其分解为更小的模块，在这种情况下，对于其他模块，您应该将NgbModule添加到imports（不带 forRoot()）。只有在添加到根应用程序模块时才会调用forRoot()。有关使用模块的更多信息，请查看the documentation on modules

就Bootstrap而言，ng-bootstrap只是组件库，这些组件的样式基于实际的Bootstrap CSS。您已经安装了Bootstrap，但您还需要将CSS添加到应用程序中。您可以尝试关注所有these complicated steps，但如果您想要开始使用，也许最好立即使用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">

这应该就是您开始所需的一切

使用ng-bootstrap正确设置角度2

1 个答案: