如何仅在 Angular 的一个组件中使用 Bootstrap？

Posted 2023-03-13

【中文标题】如何仅在 Angular 的一个组件中使用 Bootstrap？

【英文标题】：How to use Bootstrap in only one component in angular?

【发布时间】：2020-11-11 21:25:33

【问题描述】：

我有一个带有自定义主题的 Angular 应用程序，大多数组件不需要引导程序，所以在我的 angular.json 中我只包含了 bootstrap.grid.css。

随着应用程序的开发，我需要引导程序，但将其包含在 angular.json 中会影响其他组件的样式。

是否有任何选项可以仅在此特定组件中使用引导程序。

我在 css 文件中尝试了这个 @import "bootstrap/dist/css/bootstrap.css";，但没有帮助。

TIA :)

【参考方案1】：

我的简单解决方案是将引导文件的内容插入到组件 CSS 文件中，但这只是我的意见，不确定是否正确。

【参考方案2】：

我迟到了，但不久前我遇到了这个问题：只需要在一个组件中使用 Bootstrap 样式。 为了解决这个问题，我去了the Bootstrap website并下载了编译好的CSS文件。我只对 bootstrap.min.css 文件感兴趣。 为了只在一个组件中加载它，实际上是网页的顶部标题（我需要使用可折叠的导航栏快速启动和运行），我在 stylesUrl 属性中添加了上面提到的文件。我的组件装饰器是这样的（您可以随意将 Bootstrap css 文件放在其他地方）=>

import  Component  from '@angular/core';
@Component(
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: [
    "./../../../assets/css/bootstrap.min.css",
    "./header.component.css"
  ]
)
export class HeaderComponent 
  constructor()  

现在，由于默认视图封装，我可以在我的网络应用程序的顶部使用所有 Bootstrap 样式，并且只能在这个地方使用 :)

请记住，如果您在运行 ng build --prod当天没有修改 angular.json 文件，即使是缩小的 Boostrap 样式表也会引发错误> 部署您的应用程序';原因是，默认情况下，出于性能原因，组件样式的预算设置为较低的最大值。

因此，在您的 angular.json 中，查找 budgets 数组，并在其中为您的组件样式设置适合您需求的规则，您将对 ma​​ximumError 值特别感兴趣，这可能会阻止您进行生产。如果您在给定组件中加载大型样式表，则构建 =>

   ...
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "145kb"
                
              ]
    ...