서비스를 사용하여 Angular에서 스크립트를 동적으로 로드하려면 어떻게 해야 합니까?

Angular의 동적 스크립트 로딩: 솔루션 소개:

Angular 애플리케이션에서는 외부 스크립트를 포함해야 합니다. 발생할 수 있습니다. 그러나 index.html에 직접 태그를 추가하고 ES6 가져오기 문을 사용하는 데는 제한이 있습니다. 이 문서에서는 사용자 구성에 따라 스크립트를 동적으로 로드하는 기술을 제시하여 개발자가 CDN 또는 로컬 스크립트 소스 중에서 선택할 수 있도록 합니다.

동적 스크립트 로드:

동적으로 로드하려면 스크립트를 사용하려면 다음 단계를 수행할 수 있습니다.

스크립트 만들기 저장소: 동적 로딩을 위한 스크립트 경로와 고유 이름을 보유하는 ScriptStore라는 개체 배열을 설정합니다. 스크립트 서비스 삽입: ScriptService를 삽입 가능한 Angular 서비스로 구현합니다. 스크립트 로딩을 관리합니다. 스크립트 로드 방법: 로드 방법을 정의합니다. 스크립트를 동적으로 로드하는 ScriptService. 이 메소드는 스크립트 이름을 매개변수로 사용하고 약속을 반환합니다. 스크립트 로드 구현: 로드 메소드 내에서 스크립트가 이미 로드되었는지 확인합니다. 그렇지 않은 경우 요소를 지정하고 해당 소스를 지정하고 스크립트 로딩을 위한 이벤트(예: onload 또는 onreadystatechange)를 처리합니다. 서비스 삽입 및 호출: 로드해야 하는 구성 요소 또는 서비스에 ScriptService를 삽입합니다. 스크립트. 로드 메소드를 호출하여 원하는 스크립트를 로드합니다. 예제 코드:

아래는 스크립트 저장소의 샘플 구현과 서비스:

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를 삽입합니다. 그런 다음 메서드 내에서 다음과 같이 로드 메서드를 호출합니다.

this.script.load('filepicker', 'rangeSlider').then(data => { console.log('script loaded ', data); }).catch(error => console.log(error)); 이 예에서는 filepicker 및 rangeSlider 스크립트가 모두 동적으로 로드됩니다. 이제 필요에 따라 CDN 또는 로컬 폴더에서 스크립트를 로드하도록 ScriptStore를 구성할 수 있습니다.