Angular で外部スクリプトを動的にロードするにはどうすればよいですか?-jsチュートリアル-php.cn

How to Dynamically Load External Scripts in Angular?

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

< を明示的に追加せずに外部ライブラリを Angular アプリケーションにシームレスに統合する必要があるシナリオが発生する場合があります。 ;スクリプト> Index.html ファイル内のタグ。この記事では、Angular で外部スクリプトを動的にロードするためのステップバイステップのガイドを詳しく掘り下げて、この特定のニーズに対処します。

Angular サービスの使用

専用のサービスを紹介します。スクリプトの読み込みを効率的に処理するための Angular サービス。このサービス ScriptService は、ロードされるスクリプトのレジストリを管理します。各スクリプトは名前で識別され、そのソースパス (CDN またはローカル) が伴います。要求されると、サービスはスクリプトをフェッチし、重複を防ぐためにスクリプトが 1 回だけロードされるようにします。

サービスの実装

ScriptService の実装には、次の配列の作成が含まれます。 scripts を使用して、すべての外部スクリプトの名前とソースのペアを保存します。サービスは、スクリプトごとにロード済みフラグを維持して、冗長なロードを回避します。初期化時に、配列にリストされているスクリプトがプリロードされます。

サービスのload() メソッドは、ロードされるスクリプト名の配列を受け取ります。名前を反復処理し、それぞれに対してloadScript() メソッドをトリガーします。

loadScript() メソッドは、ロードされたフラグを検査することで、スクリプトがすでにロードされているかどうかを確認します。ロードされると、すぐに Promise が解決されます。

ロードする必要があるスクリプトの場合、loadScript() は

人気のチュートリアル

詳細>