如何在 Angular 中動態載入外部腳本？

在Angular 中動態加載外部腳本

動態加載外部腳本允許Angular 應用程式推遲第三方庫的加載，直到它們被加載為止。實際需要的，提高效能和靈活性。然而，標準的 ES6 導入機制是靜態的，並且在轉譯期間發生，使其不適合此目的。

解決方案：

要動態載入外部腳本，我們可以利用管理腳本載入的自訂服務。其中一項服務採用以下方法：

1。建立腳本儲存：

定義一個物件數組，每個物件包含腳本的名稱和來源路徑：

const ScriptStore: Scripts[] = [
    {name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
    {name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];

2.實作腳本服務：

建立一個提供載入腳本方法的服務：

@Injectable()
export class ScriptService {

    private scripts: any = {};

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

    load(...scripts: string[]) {
        // Load multiple scripts in parallel
    }

    loadScript(name: string) {
        // Load a single script
    }
}

3.動態載入腳本：

在需要的地方注入ScriptService 並調用 load() 來動態加載腳本：

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

在這種方法中，腳本在運行時動態加載，提供Angular 應用程式中對外部庫加載的靈活性和控制。

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