Angular で外部スクリプトを動的にロードするにはどうすればよいですか?

Angular での外部スクリプトの動的ロード

外部スクリプトの動的ロードにより、Angular アプリケーションはサードパーティ ライブラリのロードを延期できます。実際に必要な機能を実現し、パフォーマンスと柔軟性を向上させます。ただし、標準の ES6 インポート メカニズムは静的であり、トランスパイル中に発生するため、この目的には適していません。

解決策:

外部スクリプトを動的にロードするには、以下を利用できます。スクリプトの読み込みを管理するカスタム サービス。このようなサービスの 1 つは、次のアプローチを採用しています。

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 中国語 Web サイトの他の関連記事を参照してください。