当前位置: 首页 > 面试题库 >

如何在Angular中动态加载外部脚本?

山越
2023-03-14
问题内容

我有这个模块,它将外部库与其他逻辑一起组成组件,而无需将<script>标签直接添加到index.html中:

import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
export class MyAppComponent {...}

我注意到importES6规范是静态的,并且在TypeScript编译期间而不是在运行时进行了解析。

无论如何使其可配置,以便从CDN或本地文件夹加载file.js?如何告诉Angular 2动态加载脚本?


问题答案:

如果使用的是system.js,则可以System.import()在运行时使用:

export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

如果您使用的是webpack,则可以通过以下方式充分利用其强大的代码拆分支持require.ensure

export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}


 类似资料:
  • 本文向大家介绍JS加载器如何动态加载外部js文件,包括了JS加载器如何动态加载外部js文件的使用技巧和注意事项,需要的朋友参考一下 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js JsLoader.js测试 测试结果如下:

  • 本文向大家介绍Angular-Ui-Router+ocLazyLoad动态加载脚本示例,包括了Angular-Ui-Router+ocLazyLoad动态加载脚本示例的使用技巧和注意事项,需要的朋友参考一下 在使用angular过程以前同事是采取一次性加载方式,在index页面一次性加载所有的js跟css,这种加载方式只适合教学和小型项目中,中大型不建议使用,加载速度影响到用户体验。 在使用了Ui

  • 本文向大家介绍vue如何实现动态加载脚本,包括了vue如何实现动态加载脚本的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态

  • 问题内容: (此问题与我所见过的许多问题相似,但大多数问题对我的工作不够具体) 背景: 我的程序的目的是使使用我的程序的人可以轻松制作自定义的“插件”,然后将其编译并加载到程序中使用(与在我的程序中实现的不完整,缓慢的解析器相比)。我的程序允许用户将代码输入到预定义的类中,以扩展与我的程序一起打包的已编译类。他们将代码输入到文本窗格中,然后我的程序将代码复制到要重写的方法中。然后,将其保存为(几乎

  • 问题内容: (此问题与我所见过的许多问题相似,但大多数问题对我的工作不够具体) 背景: 我的程序的目的是使使用我的程序的人可以轻松制作自定义的“插件”,然后将其编译并加载到程序中使用(与在我的程序中实现的不完整,缓慢的解析器相比)。我的程序允许用户将代码输入到预定义的类中,从而扩展了与我的程序一起打包的已编译类。他们将代码输入到文本窗格中,然后我的程序将代码复制到被覆盖的方法中。然后,将其保存为(

  • 问题内容: 我的问题是该网页未加载到webview中。 启动网络浏览器… 这是我的活动代码: 我在清单中添加了所需的权限: 问题答案: 由于这篇文章,我终于找到了解决方案。这是代码: