Angular 7 不呈现引导控制

Question

我正在创建一个需要浏览图片的简单系统。

我正在使用纸质仪表板引导管理面板

可以在下面找到：

https://www.npmjs.com/package/paper-dashboard

然后我需要添加一个文件浏览器功能，就像我在 w3school 上找到的下面的屏幕截图一样

但它在我的 Angular 应用程序上无法正常工作或呈现。为了检查引导代码是否正常工作。我创建了一个虚拟 html 文件，它像屏幕截图一样正确呈现。

但这就是它的渲染方式

但我在angular.json 文件中有bootstrap.min.css

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js"
            ],

但是如果我在style.scss 中导入bootstrap.min.css

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

并在样式数组中删除它

"styles": [
              "src/styles.scss",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],

变成了这样。导航未正确呈现。

在 Angular 中可能是什么原因造成的？我来自wpf。我正在使用 angular 7 和 asp.net core 2 进行自学。所以我真的不清楚 stlye 发生了什么。

谢谢。

Answer 1

据我所知，您正在从

导入引导程序

"node_modules/bootstrap/dist/css/bootstrap.min.css"

意味着您将引导程序安装为单独的包，这很可能是最新版本 - v4.3.1

paper-dashboard 正在使用 Bootstrap v3.3.5，因此您的版本不匹配。 (Check it here)

可能的解决方案是：

• npm install bootstrap@3.3.5 - 它将用 3.3.5 版本替换您当前的引导安装
• 更改您的导入以匹配位于paper-dashboard package 中的bootstrap.min.css 的路径
• 手动更新仪表板以匹配最新版本。