Bootstrap在角度项目中无法正常工作

Question

这是我第一次创建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类正在运行，但下拉列表无法正常运行，我认为bootstrap.min.js出了点问题。下拉菜单应在单击后打开：

但是就我而言，它已经开放了：

Answer 1

我建议您对Angular中的Bootstrap组件使用ng-bootstrap，而不仅仅是添加bootstrap.min.js脚本。

添加引导程序下拉列表的方法是这样的：https://stackblitz.com/run?file=src%2Fapp%2Fdropdown-basic.module.ts

参考：https://ng-bootstrap.github.io/#/components/dropdown/examples

Answer 2

有3种方法可以在角度中使用引导程序

npm install bootstrap --save

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

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

2. 在index.html文件中，将bootstrap.css文件添加为外部CSS。

3. 您可以将bootstrap.css包含在style.css或style.scss文件中，例如：

   @ import“〜bootstrap / dist / css / bootstrap.css”

Answer 3

只需安装npm i bootstrap，您还可以检查文档here

安装后，只需在style.css文件中添加以下行

@import '~bootstrap/dist/css/bootstrap.min.css';

之后在index.html文件中添加以下链接

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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上查看此处>

Answer 4

我建议使用一个角度引导程序库，该库可以用angular重新实现引导程序组件，因此可以与其余的angular很好地集成在一起。这消除了对引导javascript＆jquery的依赖。