如何在 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中文网其他相关文章！