外部脚本未以角度 5 动态加载

Posted 2023-02-16

【中文标题】外部脚本未以角度 5 动态加载

【英文标题】：External scripts not loading dynamically in angular 5

【发布时间】：2018-04-09 17:19:03

【问题描述】：

我已将外部脚本包含在脚本属性中的 .angular-cli.json 文件中，即

`

"scripts": [
      "../src/assets/plugins/jquery/jquery.min.js",
      "../src/assets/plugins/popper/popper.min.js",
      "../src/assets/plugins/jquery-blockui/jquery.blockui.min.js",
      "../src/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js",
      "../src/assets/plugins/datatables/jquery.dataTables.min.js",
      "../src/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.js",
      "../src/assets/js/pages/table/table_data.js",
      "../src/assets/js/app.js",
      "../src/assets/js/layout.js",
      "../src/assets/js/theme-color.js",
      "../src/assets/plugins/material/material.min.js",
      "../src/assets/js/pages/ui/animations.js",
      "../src/assets/plugins/bootstrap/js/bootstrap.min.js",
      "../src/assets/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js",
      "../src/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js",
      "../src/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker-init.js",
      "../src/assets/plugins/jquery-tags-input/jquery-tags-input.js",
      "../src/assets/plugins/jquery-tags-input/jquery-tags-input-init.js",
    ],`

当 Angular 应用程序启动时，所有脚本都会被加载。但是当我切换到另一个页面时，脚本不会加载。

【参考方案1】：

Angular 适用于单页应用程序，从技术上讲，只要您正确使用路由器，您就永远不会在 ng 应用程序中切换页面。所有脚本都捆绑在一起，由 Webpack 添加到 index.html 中，并且仅在加载 index.html 时加载一次。

【讨论】：

是的，我能理解您的意思，我的意思是当应用程序首次加载并处于索引路径时，即“/”所有脚本都已加载，例如数据表脚本。但是当我切换到另一个页面让我们说“/page2”时，页面内容会动态加载，但脚本不会。

这就是 SPA 的工作方式：脚本只加载一次。如果您尝试在每个路由器导航上执行一些外部 JS，则不能这样做。你应该更深入地研究 Angular 并学习尝试在 Angular 中做所有事情。

如果是这种情况，那么导航上怎么没有加载脚本呢？我是说脚本最初是加载的，但是当我更改路线时，它就消失了。

我希望在我点击另一条路线时为每条路线加载它们，因为我的一个页面有需要脚本的数据表。

相信我，如果你花时间真正了解 Angular 是什么，忘记做事的“旧方式”，开始思考 Angular 的方式，你以后不会后悔的。 :)