如何使用服务在 Angular 中动态加载脚本？

Angular 中的动态脚本加载：解决方案

简介：

在 Angular 应用程序中，需要包含外部脚本可以出现。但是，添加 <script>直接将标签添加到index.html并依赖ES6导入语句有局限性。本文介绍了一种根据用户配置动态加载脚本的技术，允许开发者在 CDN 或本地脚本源之间进行选择。</script>

动态脚本加载：

动态加载脚本，我们可以采用以下步骤：

1. 创建脚本存储：建立一个名为 ScriptStore 的对象数组，它保存动态加载的脚本路径和唯一名称。
2. 注入脚本服务：将 ScriptService 实现为管理脚本加载的可注入 Angular 服务。
3. 加载脚本方法：在ScriptService中定义一个load方法来动态加载脚本。此方法将脚本名称作为参数并返回一个承诺。
4. 加载脚本实现： 在 load 方法中，检查脚本是否已加载。如果没有，则创建一个 <script>元素，指定其来源，并处理脚本加载的事件（例如，onload 或 onreadystatechange）。</script>
5. 注入并调用服务： 将 ScriptService 注入到需要加载的组件或服务中脚本。调用 load 方法加载所需的脚本。

示例代码：

下面是脚本存储和服务的示例实现：

interface Scripts {
  name: string;
  src: string;
}

// Script store with sample script definitions
export const ScriptStore: Scripts[] = [
  { name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js' },
  { name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js' }
];

@Injectable()
export class ScriptService {
  private scripts: any = {};

  constructor() {
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  load(...scripts: string[]) {
    var promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
  }

  loadScript(name: string) {
    return new Promise((resolve, reject) => {
      // Check if script is already loaded
      if (this.scripts[name].loaded) {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      } else {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        script.onload = () => {
          this.scripts[name].loaded = true;
          resolve({ script: name, loaded: true, status: 'Loaded' });
        };
        script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
        document.getElementsByTagName('head')[0].appendChild(script);
      }
    });
  }
}

用法：

在您希望动态加载脚本的组件或服务，注入 ScriptService。然后，在一个方法中，像这样调用 load 方法：

this.script.load('filepicker', 'rangeSlider').then(data => {
  console.log('script loaded ', data);
}).catch(error => console.log(error));

在此示例中，filepicker 和 rangeSlider 脚本都将动态加载。您现在可以配置 ScriptStore 以根据需要从 CDN 或本地文件夹加载脚本。

以上是如何使用服务在 Angular 中动态加载脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！