サービスを使用して Angular でスクリプトを動的にロードするにはどうすればよいですか?

Angular での動的スクリプトの読み込み: 解決策

はじめに:

Angular アプリケーションでは、外部スクリプトを含める必要があります生じる可能性があります。ただし、<script>を追加すると、タグを直接index.htmlに追加し、ES6インポートステートメントに依存する場合には制限があります。この記事では、ユーザー構成に基づいてスクリプトを動的にロードする手法を紹介し、開発者が CDN またはローカル スクリプト ソースのどちらかを選択できるようにします。</script>

動的スクリプトの読み込み:

動的にロードするにはスクリプトを作成するには、次の手順を実行します。

1. スクリプト ストア: ScriptStore と呼ばれるオブジェクトの配列を確立します。これには、動的読み込み用のスクリプト パスと一意の名前が保持されます。
2. スクリプト サービスの注入: ScriptService を注入可能な Angular サービスとして実装します。スクリプトの読み込みを管理します。
3. スクリプトの読み込みメソッド:スクリプトを動的にロードするには、ScriptService でロード メソッドを定義します。このメソッドはスクリプト名をパラメータとして受け取り、Promise を返します。
4. ロード スクリプトの実装: ロード メソッド内で、スクリプトが既にロードされているかどうかを確認します。そうでない場合は、 を作成します。
5. サービスの挿入と呼び出し: ロードする必要があるコンポーネントまたはサービスに ScriptService を挿入します。スクリプト。 load メソッドを呼び出して、目的のスクリプトをロードします。

サンプル コード:

以下は、スクリプト ストアとサービスのサンプル実装です:

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);
      }
    });
  }
}

使用法:

内スクリプトを動的にロードするコンポーネントまたはサービスに ScriptService を挿入します。次に、メソッド内で次のようにロード メソッドを呼び出します。

this.script.load('filepicker', 'rangeSlider').then(data => {
  console.log('script loaded ', data);
}).catch(error => console.log(error));

この例では、ファイルピッカー スクリプトと rangeSlider スクリプトの両方が動的にロードされます。必要に応じて、CDN またはローカル フォルダーからスクリプトを読み込むように ScriptStore を構成できるようになりました。

以上がサービスを使用して Angular でスクリプトを動的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。