Question

我试图将Bootstrap的导航用于我的Angular 2应用程序。

我在Bootstrap文档（conditionally render）中跟踪了示例（复制/粘贴）。我在.angular-cli.json文件中包含了所有必需的CSS和JS

 "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"
  ]

但是，即使它被正确呈现，也不会处理点击事件（视图上没有任何反应）。

我不会在必要时使用ng-boostrap。如果有人也可以解释如何在A2 +应用程序中使用外部第三方javascript库（没有打字稿，只是vanilla JS），我将不胜感激。

修改

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

编辑2

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

Answer 1

bootstrap 4 beta和alpha目前在使用popper.js时遇到问题。我个人不得不使用Bootstrap 3代替我的角度4项目。

检查您的控制台是否有误导javascript。

修改

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

EDIT2

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

使用Bootstrap导航到Angular2组件

1 个答案: