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 중국어 웹사이트의 기타 관련 기사를 참조하세요!