Bagaimanakah Saya Boleh Memuatkan Skrip Secara Dinamik dalam Sudut Menggunakan Perkhidmatan?

Pemuatan Skrip Dinamik dalam Sudut: Penyelesaian

Pengenalan:

Dalam aplikasi Sudut, keperluan untuk memasukkan skrip luaran boleh timbul. Walau bagaimanapun, menambah teg terus ke index.html dan bergantung pada pernyataan import ES6 mempunyai had. Artikel ini membentangkan teknik untuk memuatkan skrip secara dinamik berdasarkan konfigurasi pengguna, membenarkan pembangun memilih antara CDN atau sumber skrip tempatan.

Pemuatan Skrip Dinamik:

Untuk memuatkan secara dinamik skrip, kita boleh menggunakan langkah berikut:

1. Buat Skrip Simpan: Wujudkan tatasusunan objek yang dipanggil ScriptStore, yang menyimpan laluan skrip dan nama unik untuk pemuatan dinamik.
2. Suntikan Perkhidmatan Skrip: Laksanakan ScriptService sebagai perkhidmatan Sudut suntikan yang menguruskan pemuatan skrip.
3. Muat Skrip Kaedah: Tentukan kaedah pemuatan dalam ScriptService untuk memuatkan skrip secara dinamik. Kaedah ini mengambil nama skrip sebagai parameter dan mengembalikan janji.
4. Muat Pelaksanaan Skrip: Dalam kaedah pemuatan, semak sama ada skrip sudah dimuatkan. Jika tidak, buat elemen, nyatakan sumbernya dan kendalikan acara untuk memuatkan skrip (cth., onload atau onreadystatechange).
5. Inject dan Invoke the Service: Inject ScriptService ke dalam komponen atau perkhidmatan yang anda perlukan untuk memuatkan skrip. Panggil kaedah pemuatan untuk memuatkan skrip yang dikehendaki.

Kod Contoh:

Di bawah ialah contoh pelaksanaan stor dan perkhidmatan skrip:

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

Penggunaan:

Dalam komponen atau perkhidmatan di mana anda ingin memuatkan skrip secara dinamik, menyuntik ScriptService. Kemudian, dalam kaedah, gunakan kaedah pemuatan seperti ini:

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

Dalam contoh ini, kedua-dua skrip pemetik fail dan rangeSlider akan dimuatkan secara dinamik. Anda kini boleh mengkonfigurasi ScriptStore untuk memuatkan skrip sama ada daripada CDN atau folder setempat mengikut keperluan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memuatkan Skrip Secara Dinamik dalam Sudut Menggunakan Perkhidmatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!