Wie kann ich externe Skripte in Angular dynamisch laden?

Dynamisches Laden externer Skripte in Angular

Das dynamische Laden externer Skripte ermöglicht es Angular-Anwendungen, das Laden von Bibliotheken von Drittanbietern zu verschieben, bis dies der Fall ist tatsächlich benötigt werden, wodurch Leistung und Flexibilität verbessert werden. Der Standard-ES6-Importmechanismus ist jedoch statisch und erfolgt während der Transpilierung, sodass er für diesen Zweck ungeeignet ist.

Lösung:

Um externe Skripte dynamisch zu laden, können wir verwenden ein benutzerdefinierter Dienst, der das Laden von Skripten verwaltet. Ein solcher Dienst verwendet den folgenden Ansatz:

1. Erstellen Sie einen Skriptspeicher:

Definieren Sie ein Array von Objekten, die jeweils den Namen und den Quellpfad eines Skripts enthalten:

const ScriptStore: Scripts[] = [
    {name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
    {name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];

2. Implementieren Sie einen Skriptdienst:

Erstellen Sie einen Dienst, der Methoden zum Laden von Skripten bereitstellt:

@Injectable()
export class ScriptService {

    private scripts: any = {};

    constructor() {
        ScriptStore.forEach((script) => {
            this.scripts[script.name] = {
                loaded: false,
                src: script.src
            };
        });
    }

    load(...scripts: string[]) {
        // Load multiple scripts in parallel
    }

    loadScript(name: string) {
        // Load a single script
    }
}

3. Skripte dynamisch laden:

Fügen Sie den ScriptService an der erforderlichen Stelle ein und rufen Sie load() auf, um Skripte dynamisch zu laden:

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

Bei diesem Ansatz werden die Skripte während der Laufzeit dynamisch geladen, um Folgendes bereitzustellen Flexibilität und Kontrolle über das Laden externer Bibliotheken in Angular-Anwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich externe Skripte in Angular dynamisch laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!