使用 Angular 2+ 引导答案

【问题标题】：Bootstrap with Angular 2+使用 Angular 2+ 引导
【发布时间】：2018-08-28 09:42:20
【问题描述】：

我试图在我的 Angular 模块中使用引导程序中的主按钮。但这似乎不起作用。

这是我到目前为止所做的。

npm install ngx-bootstrap --save

添加了引导模块和导入。

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),...]

exports: [BsDropdownModule, TooltipModule, ModalModule]

现在在模块中，我将此代码用于按钮：

<button type="submit" class="btn btn-primary">Submit</button>

但该按钮仍然是标准的 html 按钮。不是蓝色的提交按钮。导入引导程序时我是否忘记了任何步骤。在 node_modules 结构中，我可以在其中找到带有必要 .js 和 .css 文件的引导程序。

感谢您的帮助。

【问题讨论】：

标签： html angular button sass bootstrapping

【解决方案1】：

您不需要导入模块，而是需要从引导程序附加样式。 import 它们在styles.css 文件中或在angular.json 文件的styles 部分中配置

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

或你的相对/绝对路径

【讨论】：

将其添加到 .angular-cli.json 中的样式中。仍然缺少一些东西：/
在浏览器中检查您的元素，可能会应用另一种带有!important 的样式
我检查了一切。似乎不起作用。我发现 1 !important 虽然。：-webkit-writing-mode: horizontal-tb !important; 但我不认为这将是其故障的原因。这三个基本上都给了我相同的答案。

【解决方案2】：

在您的情况下，bootstrap 似乎只是样式。 HTML 元素的纯 CSS 样式。 Ngx-bootstrap 它是关于 Angular 组件（分解应用程序的方式）。这就像带有 jquery 的常规引导程序以实现交互，但在 Angular 世界中。

要在您的应用程序中获取引导样式，您需要运行命令：

    npm install bootstrap

然后将这些源文件放入angular-cli.json：

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

然后重建你的项目。

【讨论】：

【解决方案3】：

我们有两个选项可以从 NPM 安装的 Bootstrap 导入 CSS。一是在 angular.json 中配置，二是直接在 src/style.css 或 src/style.scss 中导入。您可以通过此https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/#3-importing-the-css 了解更多有关如何执行此操作的信息。

【讨论】：