Angular에서 외부 JavaScript 파일을 동적으로 로드하는 방법은 무엇입니까?

Angular에서 외부 스크립트를 동적으로 로드하는 방법

아시다시피 Angular에서 사용되는 ES6 가져오기 기능은 정적이며 실행 중에 해결됩니다. TypeScript 컴파일. 구성에 따라 스크립트를 동적으로 로드하려면 다음 기술을 사용할 수 있습니다.

script.store.ts에서 스크립트 이름과 경로가 포함된 JavaScript 파일 객체 배열을 정의합니다.

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

script.service.ts가 스크립트 로딩을 처리합니다. 논리:

import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";

declare var document: any;

@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) => {
        //resolve if already loaded
        if (this.scripts[name].loaded) {
            resolve({script: name, loaded: true, status: 'Already Loaded'});
        }
        else {
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = this.scripts[name].src;
            if (script.readyState) {  //IE
                script.onreadystatechange = () => {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        this.scripts[name].loaded = true;
                        resolve({script: name, loaded: true, status: 'Loaded'});
                    }
                };
            } else {  //Others
                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를 삽입하고 이를 사용하여 스크립트를 동적으로 로드합니다.

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

이 기술을 사용하면 구성에 따라 스크립트를 동적으로 로드할 수 있습니다. CDN 또는 로컬 파일 경로에서.

위 내용은 Angular에서 외부 JavaScript 파일을 동적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!