javascript - 在 Angular2 组件中使用 Bootstrap 导航

Question

我正在尝试在我的 Angular 2 应用程序中使用 Bootstrap 的导航。

我遵循了 Bootstrap 文档 ( https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior ) 中的示例(复制/粘贴)。我已将所有必需的 CSS 和 JS 包含在 .angular-cli.json 文件中

 "styles": [
    "styles.css",
    ....
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap/dist/css/bootstrap-grid.css",
    "../node_modules/bootstrap/dist/css/bootstrap-reboot.css",
    ....
  ],
  "scripts": [
    ....
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

但是，即使正确呈现，也不会处理点击事件( View 上没有任何反应)。

我不会使用 ng-boostrap，只有在必要时才使用。如果有人还可以解释如何在 A2+ 应用程序中使用外部第 3 方 javascript 库(没有 typescript ，只有 vanilla JS)，我将不胜感激。

编辑

我认为了解嵌套导航栏的组件是在应用程序加载的不同时刻动态创建的(因此在执行脚本时)会有所帮助。这可能是没有点击处理程序绑定(bind)到元素的原因吗？如果是这样，我该如何解决？

编辑 2

我尝试在运行时未加载的组件中使用 Boostrap(在 app-root 组件中)......并且有效。那么，为什么在运行时动态创建的组件中，这不再起作用了？

Answer 1

bootstrap 4 beta 和 alpha 当前存在 popper.js 问题。就我个人而言，我不得不为我的 Angular 4 元素使用 Bootstrap 3。

检查您的控制台是否错误触发了 javascript。

编辑

这些是我在尝试运行控制台时遇到的错误。 popper error

编辑2

我不认为加载时间是相关的，只要 javascript 在它应该在 html 上使用的时间加载。如果不是这种情况，也许生命周期 Hook 可以帮助您。 https://angular.io/guide/lifecycle-hooks