Bootstrap 在 Angular 项目中无法正常工作答案

【问题标题】：Bootstrap not working properly in angular projectBootstrap 在 Angular 项目中无法正常工作
【发布时间】：2020-08-21 08:43:24
【问题描述】：

这是我第一次创建 Angular 项目。我的项目中的引导程序有问题。我安装了 bootstrap、jquery、popper.js，并将它们包含在 angular.json 文件中。

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

引导类正在工作，但下拉菜单无法正常工作，我认为 bootstrap.min.js 有问题。单击下拉菜单后应打开：

但就我而言，它已经打开：

【问题讨论】：

在下面查看我的答案

标签： angular angular-ui-bootstrap

【解决方案1】：

只需安装npm i bootstrap 也可以查看文档here

安装后只需在angular.json 文件styles 数组下添加以下行

"./node_modules/bootstrap/dist/css/bootstrap.css",

HTML

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div>

在引导文档Here中查看更多下拉列表

你可以在这里查看Stackblitz

【讨论】：

感谢您的回答。但不幸的是它无济于事（
你可以在我的帖子中查看 stackblitz 链接

【解决方案2】：

请这样做：

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

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

【讨论】：

【解决方案3】：

我建议使用 angular 引导库之一，它使用 angular 重新实现引导组件，因此可以与 angular 的其余部分很好地集成。这消除了对引导 javascript 和 jquery 的依赖。

这里有两个选项（没有特定顺序）。

【讨论】：

【解决方案4】：

您可以通过 3 种方式在 Angular 中使用引导程序

npm install bootstrap --save

在 angular.json 文件中添加引导模块的路径，如：

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

在 index.html 文件中添加 bootstrap.css 文件作为外部 css。
您可以将 bootstrap.css 包含到 style.css 或 style.scss 文件中，例如：

@import "~bootstrap/dist/css/bootstrap.css"

【讨论】：

感谢您的回答。 Bootstrap 安装成功，css 类没有问题。但问题是 .js 似乎无法正常工作，因为下拉菜单的工作方式错误
使用 bootstrap.bundle.min.js 或者确保你的依赖项中有 Popper.js