0

作为 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 {
}
4

1 回答 1

3

在app.module文件中查找。你应该看到@NgModule() AppModule. 这是AppModule您的示例中发布的内容。您应该确保当您添加NgbModule到您调用的导入时forRoot，就像您的示例一样。

至于第二个例子，现在整个应用程序可以只使用AppModule. 但是随着应用程序的增长，您可能希望将其分解为更小的模块，在这种情况下，对于这些其他模块，您应该只添加NgbModule到imports( without 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">

这应该是您开始所需的全部内容

于 2016-10-27T01:58:57.583 回答