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 でロード メソッドを定義します。このメソッドはスクリプト名をパラメータとして受け取り、Promise を返します。</li> <li> <strong>ロード スクリプトの実装:</strong> ロード メソッド内で、スクリプトが既にロードされているかどうかを確認します。そうでない場合は、<スクリプト> を作成します。 </li> <li> <strong>サービスの挿入と呼び出し:</strong> ロードする必要があるコンポーネントまたはサービスに ScriptService を挿入します。スクリプト。 load メソッドを呼び出して、目的のスクリプトをロードします。</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>この例では、ファイルピッカー スクリプトと rangeSlider スクリプトの両方が動的にロードされます。必要に応じて、CDN またはローカル フォルダーからスクリプトを読み込むように ScriptStore を構成できるようになりました。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
