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

Posted 2023-03-06

【中文标题】如何在角度 2 中使用引导程序 4？

【英文标题】：How to use bootstrap 4 in angular 2?

【发布时间】：2016-11-26 19:40:15

【问题描述】：

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

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

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

【问题讨论】：

你可以正常使用它。我不确定你的sass。 ng2-bootstrap 只为您提供组件。

【参考方案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 的提醒

【讨论】：

这对我有用，但我还需要将导入语句添加到每个需要它的组件中。例如，当我将它添加到我的 styles.scss 时，我的导航栏组件看起来不正确，直到我也将它导入到我的 navbar.component.scss 文件中。随着我的应用程序的增长，这感觉有点像开销，必须将引导程序导入到每个组件样式表中。

@MattSugden 您不需要将其导入所有组件。您是否将默认样式类型更改为 scss？查看我的更新答案！

@MattSugden 另请注意，最近更新了 bootstrap 4，它显着改变了导航样式。因此，请检查您是否使用了正确的 html 元素和类。我在一个项目中遇到了类似的问题。

你说得对，这是我的错误，我将它添加到 app.component.scss，而不是 style.scss。太晚了，我看了太久了！

我认为这个帖子应该更新。例如，我注意到他们放弃了 Tether 以支持 popper。

【参考方案2】：

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

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

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

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

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

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

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

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  

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

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

打开 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>

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

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

【讨论】：

我只能通过添加导入 NgbModule.forRoot()（与入门指南一致）并使用标签 hello来实现此功能警报>。这会显示警报（尽管我无法关闭它）。

@AlanHay 你看过ng-bootstrap.github.io/#/components/alert - 可关闭警报吗？

试试这个：警告！最好检查一下自己，你看起来不太好。

我确认即使添加 [dismissible]="true" 也无助于解除警报。无论单击 X 图标多少次，警报都不会消失。控制台中也没有记录错误。

有趣，您需要使用示例中使用的typescript 组件代码。

【参考方案3】：

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

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

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

自己创建定义； 创建一个与库对象同名的全局any变量，以免出现编译器错误； 使用错误（

这是最糟糕的选择

）；

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

【参考方案4】：

我建议：

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

【参考方案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

【参考方案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" />`

【讨论】：

bootstrap 4 本身不应该包含--save吗？

【参考方案7】：

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

ng add @ng-bootstrap/schematics

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

【参考方案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>

【讨论】：

@ChrisEenberg 现在可以了吗？？

【参考方案9】：

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

【参考方案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';

【参考方案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