javascript - 如何在 Angular 中重新执行外部脚本？

Question

我有一个外部 js 文件，其中包含一堆用于用户界面的 jQuery 方法。但是，Angular 路由器是异步的，因此脚本无法正确渲染其他页面上的用户界面元素，因为它们尚不存在于 DOM 中。

以前，我从脚本中挑选一些方法并将它们添加到名为 rerender 的方法中，但这变得困惑。

我的问题是看看是否有办法在 rerender 方法内再次加载并执行整个脚本？

Answer 1

您可以导入外部脚本。在构造函数内执行此操作:

constructor() {
    System.import('script-loader!bower_components/fullcalendar/dist/fullcalendar.min.js').then(()=>{
      this.render(); // Do whatever, for demonstration I call a render() method
    })
}

确保在您的自定义类型中您已声明系统:

declare let System: SystemJS;

interface SystemJS {
  import: (path?: string) => Promise<any>;
}

interface GlobalEnvironment {
  SystemJS: SystemJS;
  System: SystemJS;
}

选项 2:

或者，您可以将其放入模块中的 import 语句之后:

require('bootstrap/js/tooltip.js'); // For example