jquery - 如何在 Angular 4 或 4+ 应用程序中导入 Bootstrap 4 主题

Question

我是 Angular 的新手。我尝试在 Angular 4 中导入 Bootstrap 4 单页模板:https://startbootstrap.com/template-overviews/new-age/ 。但是当我在本地主机中看到这个时，它没有加载一些功能，例如平滑滚动等。似乎 new-age.js 文件没有加载。如何解决这个问题？

保存的文件(css、js、jquery、bootstrap)位于 src/assests 文件夹中。
我像这样链接了 angular.json 中的文件

"styles": [
          "src/styles.css",
          "src/assets/vendor/bootstrap/css/bootstrap.min.css",
          "src/assets/vendor/font-awesome/css/font-awesome.min.css",
          "src/assets/vendor/simple-line-icons/css/simple-line-icons.css",
          "src/assets/device-mockups/device-mockups.min.css",
          "src/assets/css/new-age.min.css"
        ],
        "scripts": [
          "src/assets/vendor/jquery/jquery.min.js",
          "src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
          "src/assets/vendor/jquery-easing/jquery.easing.min.js",
          "src/assets/js/new-age.js"
        ]

HTML 位于 app.component.html

Answer 1

使用 Angular，我建议使用 ng-bootstrap反而。您需要做的就是在 angular-cli.json 中导入 bootstrap 的样式表(然后导入您的个人样式表(!)):

"styles": [
          "src/assets/vendor/bootstrap/css/bootstrap.css",
          "src/styles.css"
        ],

然后在 app.module 的 import 数组中导入 ng-bootstrap，其中:

NgbModule.forRoot(),

并且您可以使用所有适合 Angular 预制组件。