Question

我正在进入Angular和Bootstrap。我构建了一个Angular项目，然后在事实发生后向其中添加了引导程序（npm install bootstrap），然后在其中一个html页面上尝试了各种引导程序功能。其中有些有效，有些则无效。

该问题答案中的代码，例如：Dismissable alert。显示警报，但是当我单击X时，它不会消失。奇怪的是，如果我直接在浏览器中访问完全相同的HTML文件，而不是通过提供的Angular页面访问该文件，则该功能正常运行。

那我在哪里安装错了什么？这是我根据互联网上的各种提示做出的一些尝试：这是我的angular.json的相关部分：

    "styles": [
    "node_modules/jquery/dist/jquery.js",
    //"node_modules/tether/dist/js/popper.js",
    "src/styles.scss",
    {
        "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
    }
    ],

我的styles.css包含：

    @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
    @import "~bootstrap/dist/css/bootstrap.css";

Answer 1

在scripts属性中而不是在styles属性中导入JavaScript文件。

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

不要导入CSS文件两次。

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

某些引导功能在Angular中不起作用，但在常规HTML文件中起作用

1 个答案: