如何在角度 2 中使用引导程序 4？

Question

我正在构建一个用 typescript 编写的 Angular 2 应用程序。它会结合一些自定义主题使用 bootstrap 4 框架，这可能吗？

“ng2-bootstrap”npm 包不起作用，因为它不允许我使用引导 css 类，而是提供自定义组件。 (http://github.com/valor-software/ng2-bootstrap)

在我使用 sass 的 angular 2 项目中，是否可以从源代码构建 bootstrap 4，因为它也使用 sass 进行样式设置？

Answer 1

Angular2 CLI 的 Bootstrap4 alpha（也适用于 Angular4 CLI）

如果您使用的是 angular2 cli/angular 4 cli，请执行以下操作：

npm i bootstrap@next --save

这会将引导程序 4 添加到您的项目中。

接下来转到您的 src/style.scss 或 src/style.css 文件并在那里导入引导程序：

对于 style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于 style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

如果您使用的是 scss，请确保将.angular-cli.json 中的默认样式更改为 scss：

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

引导 JS 组件

为了让 Bootstrap JS 组件正常工作，您仍然需要将 bootstrap.js 导入到 .angular-cli.json 下的 scripts （这应该会自动发生）：

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

2017/09/13 更新： Boostrap 4 Beta 现在使用 popper.js 而不是 tether.js。因此，根据您使用的版本，在脚本中导入 tether.js (alpha) 或 popper.js (beta)。 感谢@MinorThreat 的提醒

Answer 2

上面的选项都可以，但是我通过 NPM 使用这种方法：

1. 导航到：Bootstrap 4 并检索 npm 命令

2. 在您的项目中运行从步骤 1 获得的 NPM 命令，即

   npm install bootstrap@4.0.0-alpha.5 --save

3. 安装上述依赖后，运行以下 npm 命令将安装引导模块 npm install --save @ng-bootstrap/ng-bootstrap 你可以阅读更多关于这个here

4. 将以下导入添加到 app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 并将 NgbModule 添加到 imports

5. 您的应用模块将如下所示：

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. 打开 angular-cli.json 并在样式数组中插入一个新条目：

   "styles": [
     "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

7. 打开 src/app/app.component.html 并添加

   <alert type="success">hello</alert>
   

   或者，如果您想使用 ng alert，请将以下内容放在您的 app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. 现在运行您的项目，您应该会在浏览器中看到引导警报消息。

注意：您可以阅读有关ng Components here的更多信息

Answer 3

要使用任何需要 JQuery 的可视化库，只需执行以下操作：

• 在索引中添加库css；
• 将jquery js文件添加到索引；
• 在索引中添加库js文件；
• 安装库定义文件（d.ts）；
• 安装 jquery 定义文件 (d.ts)；

如果库没有定义文件，您可以：

• 自己创建定义；
• 创建一个与库对象同名的全局any变量，以免出现编译器错误；
• 使用错误（这是最糟糕的选择）；

现在你可以使用 Typescript 中的库了；

Answer 4

我建议：

• 只需在您的index.html 页面中包含指向Bootstrap's CSS file 的链接
• 使用ng-bootstrap - 一组专用的 Angular 2 指令，用于需要动态行为的部件。这样你就不需要导入/设置 jQuery 也不需要关心 Bootstrap 的 JavaScript。

Answer 5

您可以使用 npm 安装最新的引导程序版本。这可以使用以下命令完成：

npm install bootstrap@4.0.0-beta

在此之后，您可能需要将 bootstrap.css 导入到您的主 css 文件中。如果您使用的是 angular-cli，那将是 styles.css。

@import '~bootstrap/dist/css/bootstrap.min.css';

如果您想了解更多，请使用链接：http://technobytz.com/install-bootstrap-4-using-npm.html

Answer 6

首先进入您的项目目录并按照以下步骤操作。

1) npm install --save @ng-bootstrap/ng-bootstrap（在 node js 命令提示符下运行此命令）

2)npm install bootstrap@4.0.0-alpha.6（下次运行）

3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'(写在app module.ts中)

4) 如果 Module 是你的根模块，包括这个

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

    (or)

如果不是根模块

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) 在 system.config.js 中写入

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) 添加Index.html

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" 
 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`

Answer 7

ng add 已在 Angular 6 中引入。要安装 Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

不要忘记使用ng serve 重新启动您的应用程序。

Answer 8

在 Angular 6 中不要使用 npm i bootstrap@next --save 可能会起作用，但有时添加这些不会更好：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

Answer 9

在 Angular 6 中：首先在项目目录npm install bootstrap 中安装引导程序。如果您查看 Angular.JSON 文件，您会看到 style.css 已被引用，因此在 styles.css 中只需添加 @import "~bootstrap/dist/css/bootstrap.css";

Answer 10

Angular v6 Onwards Bootstrap v4 和 SCSS

这适用于启用 angular 7 scss 的项目

运行以下命令安装 bootstrap、jQuery 和 popper.js

npm install --save bootstrap jquery popper.js

jQuery 和 popper.js 是运行 bootstrap4 的先决条件（请参阅 https://getbootstrap.com 了解更多信息。）

转到根文件夹中的 angular.json 文件。编辑

架构师 -> 构建 -> 选项 -> 脚本

节点如下

 "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

这将在您的项目中启用引导程序的 javascript 功能。

转到src->styles.scss 文件并添加以下行

@import '~bootstrap/scss/bootstrap';

Answer 11

使用 Angular CLI 添加引导程序：

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve