通过Angular 2中的所有组件加载脚本

时间:2017-09-27 12:21:48

标签: javascript angular typescript angular2-routing

我一直在使用带有AdminLTE的Angular 2,它需要运行一些脚本来正确加载。所以我已将它们添加到我的 .anglular-cli.json

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/admin-lte/dist/js/adminlte.min.js",
    "../node_modules/moment/min/moment.min.js"
],

不幸的是,这不是一直都有效。页面第一次加载正常,但是当我路由到另一个页面时,不会为组件模板重新加载脚本。

我找不到任何关于此的信息,这对我来说非常令人惊讶,因为我认为这将是一个普遍的问题!我可能完全迷失了!

2 个答案:

答案 0 :(得分:2)

我发现一个简单的解决方案就是在登录后向您打开的任何链接添加window.location.href = '...'。这是我点击登录按钮时的功能。

this.authService.authenticateMember(member).subscribe(data => {
  if (data.success) {
      ...
      window.location.href = '/'
      ...
  } else {
      ...
  }
}

因此,如果您正在使用身份验证,那么您可以在登录成功响应结束时放置上面的代码,它将刷新页面,并将用户带到成功登录后的任何位置。

这不是最好的解决方案,但它是我能想到的最简单的解决方案,即剂量需要太多变化。希望它有所帮助:)

答案 1 :(得分:1)

您可以在每次需要时删除并重新创建DOM中的脚本元素,如下所示:

document.getElementById("myScript").remove();
var testScript = document.createElement("script");
testScript.setAttribute("id", "myScript");
testScript.setAttribute("src", "assets/js/script.js");
document.body.appendChild(myScript);

我在GitHub上发了一个问题,在那里我解释了如何做到这一点。