Dynamisches Laden von Skripten in Angular: Eine Lösung Einführung: In Angular-Anwendungen besteht die Notwendigkeit, externe Skripte einzubinden entstehen kann. Das Hinzufügen von Tags direkt in index.html zu verwenden und sich auf ES6-Importanweisungen zu verlassen, hat Einschränkungen. In diesem Artikel wird eine Technik zum dynamischen Laden von Skripten basierend auf der Benutzerkonfiguration vorgestellt, die es Entwicklern ermöglicht, zwischen CDN oder lokalen Skriptquellen zu wählen.</p> <p><strong>Dynamisches Laden von Skripten:</strong></p> <p>Zum dynamischen Laden Skripte können wir die folgenden Schritte ausführen:</p> <ol> <li> <strong>Ein Skript erstellen Store:</strong> Erstellen Sie ein Array von Objekten namens ScriptStore, das Skriptpfade und eindeutige Namen für das dynamische Laden enthält.</li> <li> <strong>Injizieren Sie den Script-Dienst:</strong> Implementieren Sie den ScriptService als injizierbaren Angular-Dienst verwaltet das Laden von Skripten.</li> <li> <strong>Methode zum Laden von Skripten:</strong> Definieren Sie in ScriptService eine Lademethode zum Laden Skripte dynamisch. Diese Methode verwendet Skriptnamen als Parameter und gibt ein Versprechen zurück.</li> <li> <strong>Implementierung des Skripts laden:</strong> Überprüfen Sie innerhalb der Lademethode, ob das Skript bereits geladen ist. Wenn nicht, erstellen Sie ein <script> Element, geben Sie seine Quelle an und verarbeiten Sie Ereignisse für das Laden des Skripts (z. B. onload oder onreadystatechange).</li> <li> <strong>Injizieren und aufrufen Sie den Dienst:</strong>Injizieren Sie ScriptService in die Komponente oder den Dienst, wo Sie laden müssen Skripte. Rufen Sie die Lademethode auf, um die gewünschten Skripte zu laden.</li> </ol> <p><strong>Beispielcode:</strong></p> <p>Unten finden Sie eine Beispielimplementierung des Skriptspeichers und -dienstes:</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">Nach dem Login kopieren</div></div> <p><strong>Verwendung:</strong></p> <p>In der Komponente oder dem Dienst, die Sie laden möchten Um Skripte dynamisch zu erstellen, fügen Sie den ScriptService ein. Rufen Sie dann innerhalb einer Methode die Lademethode wie folgt auf:</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">Nach dem Login kopieren</div></div> <p>In diesem Beispiel werden sowohl Filepicker- als auch RangeSlider-Skripte dynamisch geladen. Sie können den ScriptStore jetzt so konfigurieren, dass er Skripte je nach Bedarf entweder von einem CDN oder einem lokalen Ordner lädt.</p>
