Angular의 동적 스크립트 로딩: 솔루션 소개: Angular 애플리케이션에서는 외부 스크립트를 포함해야 합니다. 발생할 수 있습니다. 그러나 index.html에 직접 태그를 추가하고 ES6 가져오기 문을 사용하는 데는 제한이 있습니다. 이 문서에서는 사용자 구성에 따라 스크립트를 동적으로 로드하는 기술을 제시하여 개발자가 CDN 또는 로컬 스크립트 소스 중에서 선택할 수 있도록 합니다.</p> <p><strong>동적 스크립트 로드:</strong></p> <p>동적으로 로드하려면 스크립트를 사용하려면 다음 단계를 수행할 수 있습니다.</p> <ol> <li> <strong>스크립트 만들기 저장소:</strong> 동적 로딩을 위한 스크립트 경로와 고유 이름을 보유하는 ScriptStore라는 개체 배열을 설정합니다.</li> <li> <strong>스크립트 서비스 삽입:</strong> ScriptService를 삽입 가능한 Angular 서비스로 구현합니다. 스크립트 로딩을 관리합니다.</li> <li> <strong>스크립트 로드 방법:</strong> 로드 방법을 정의합니다. 스크립트를 동적으로 로드하는 ScriptService. 이 메소드는 스크립트 이름을 매개변수로 사용하고 약속을 반환합니다.</li> <li> <strong>스크립트 로드 구현:</strong> 로드 메소드 내에서 스크립트가 이미 로드되었는지 확인합니다. 그렇지 않은 경우 <script> 요소를 지정하고 해당 소스를 지정하고 스크립트 로딩을 위한 이벤트(예: onload 또는 onreadystatechange)를 처리합니다.</li> <li> <strong>서비스 삽입 및 호출:</strong> 로드해야 하는 구성 요소 또는 서비스에 ScriptService를 삽입합니다. 스크립트. 로드 메소드를 호출하여 원하는 스크립트를 로드합니다.</li> </ol> <p><strong>예제 코드:</strong></p> <p>아래는 스크립트 저장소의 샘플 구현과 서비스:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>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); } }); } }</pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>사용:</strong></p> <p>스크립트를 동적으로 로드하려는 구성 요소 또는 서비스에 ScriptService를 삽입합니다. 그런 다음 메서드 내에서 다음과 같이 로드 메서드를 호출합니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>this.script.load('filepicker', 'rangeSlider').then(data => { console.log('script loaded ', data); }).catch(error => console.log(error));</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 예에서는 filepicker 및 rangeSlider 스크립트가 모두 동적으로 로드됩니다. 이제 필요에 따라 CDN 또는 로컬 폴더에서 스크립트를 로드하도록 ScriptStore를 구성할 수 있습니다.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
