如何使用服務在 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);
      }
    });
  }
}

用法：使用：

用法：

用法：

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

用法：使用：在您希望動態載入腳本的元件或服務，注入ScriptService。然後，在一個方法中，像這樣呼叫 load 方法：在此範例中，filepicker 和 rangeSlider 腳本都會動態載入。現在您可以配置 ScriptStore 以根據需要從 CDN 或本機資料夾載入腳本。

以上是如何使用服務在 Angular 中動態載入腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！