仅将 Bootstrap 添加到 Angular 中的特定组件（版本 13）

Question

我的问题是我在 Angular 13（当前最新）中有一个项目，我只需要将 Bootstrap 框架添加到该项目中的一组特定组件。

有没有可能我可以 link 以每个组件为基础？

预期问题

为什么我不在整个项目中添加 Bootstrap？

该项目是对现有的无框架或库网站的迁移，仅使用中小型普通 HTML-CSS-JS。迁移的时间非常有限（实际上我的 component.ts 文件中只有 JavaScript 的时间太少了）。我也不熟悉Angular，实际上第一次用任何前端Web框架启动这么大的项目。

已选答案 最初，我确实选择为每个组件添加 bootstrap 并从我的资产文件夹中引用它。然而，在一位用户提出关于视图封装导致可怕的性能后果之后，我确实设法更新了给定的 CSS 代码以与 Bootstrap 5 框架的全局集成兼容。由于性能问题，我建议其他人也尽可能修复兼容性。如果有人好奇的话，我使用了 NPM 的包 ng add bootstrap。我可以确认来自 Bootstrap 的 CDN 也有效。

Answer 1

下载 bootstrap css 文件并将其保存在您的资产文件夹中。然后将其包含在组件的 styleUrls 数组中：

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.scss',
     '/assets/bootstrap.min.css'
  ],
})
export class TestComponent implements OnInit {}

Answer 2

在assets文件夹中保存Bootstrapcss文件，并在组件styleUrls.

中添加路径

我的文件夹结构是-

my-app/
├─ node_modules/
├─ src/
│  ├─ app
│  ├─ assets

在组件中包含 CSS 路径 -

@Component({
selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [
     './test.component.css',
     '../../assets/bootstrap.min.css'
  ],
})

Answer 3

在每个需要设置样式的组件中导入 bootstrap.css 将导致整个 bootstrap css 文件在每个组件的包中复制，同时封装样式。

另一方面，例如，您可以在自定义 CardComponent 中导入 card.scss。但是当你有一个必须由多个组件一起工作的组件时（例如 navbar 由 navbar-items 和 navbar-dropdowns，你会遇到这样的情况：

.navbar[ng_scope1] {
    /* Expected style for the navbar */
}

.navbar[ng_scope2] .navbar-dropdown[ng_scope2] {
    /* Expected style for the navbar-dropdown */
}

.navbar[ng_scope3] .navbar-dropdown[ng_scope3] .navbar-item[ng_scope3] {
    /* Expected style for the navbar-item */
}

因为你的html类似于

<bs-navbar>
    <div class="navbar" ng_scope1>
        <bs-navbar-dropdown>
            <ul class="navbar-dropdown" ng_scope2>
                <bs-navbar-item>
                    <li class="navbar-item" ng_scope3>Login</li>
                </bs-navbar-item>
            </ul>
        </bs-navbar-dropdown>
    </div>
</bs-navbar>

不会应用任何样式，除非您禁用视图封装。此外，导航栏 css 仍将生成 3 次...

所以据我所知，ATM 最好在你的应用程序中使用整个 bootstrap.css，最好是通过你的 angular.json，（不能是 tree-shaken) 比上述任何解决方案...

关于您关于复制 bootstrap.css 文件的问题，我创建了一个空白的 angular 应用程序，安装了 bootstrap，并且

@import '~bootstrap/scss/bootstrap';

在app.component.scss

然后我生成了另一个组件，将其放在 appcomponent 上，并将整个 bootstrap 样式表也导入到这里：

（我也想有一个好的解决方案...）
请不要接受这个作为答案。

仅将 Bootstrap 添加到 Angular 中的特定组件（版本 13）

Adding Bootstrap only to Specific Components in Angular (version 13)

single-page-application

bootstrap-4

angular-cli

angular