import { APP_INITIALIZER } from '@angular/core'Diese Codezeile in Angular importiert APP_INITIALIZEReine Konstante mit dem Namen , die aus dem Angular-Kernmodul stammt @angular/core. APP_INITIALIZERist eine wichtige Angular-Funktion, die zum Durchführen einer Reihe von Initialisierungsvorgängen verwendet wird, die normalerweise zum Ausführen einiger notwendiger Aufgaben vor der Konfiguration der Anwendung verwendet wird. In dieser Antwort werde ich im Detail erklären, APP_INITIALIZERwas , seine Verwendung und wie man es anhand von Beispielen veranschaulichen kann.
APP_INITIALIZERRolle
APP_INITIALIZERDabei handelt es sich um einen von Angular bereitgestellten Mechanismus, um beim Start der Anwendung einige Initialisierungsaufgaben auszuführen. Zu diesen Aufgaben gehören typischerweise das Laden der Konfiguration, das Festlegen globaler Variablen, das Initialisieren der Internationalisierungseinstellungen, das Vorabrufen von Daten usw. Damit können Sie Code ausführen, bevor Anwendungsmodule geladen werden, und so sicherstellen, dass sich die Anwendung beim Start im richtigen Zustand befindet.
Verwendung
Um es zu verwenden APP_INITIALIZER, müssen Sie eine Factory-Funktion im Abhängigkeitsinjektionssystem von Angular registrieren, die beim Start der Anwendung aufgerufen wird. Diese Factory-Funktion gibt ein Promise oder Observable zurück und Angular wartet, bis dieses Promise oder Observable abgeschlossen ist, bevor der Anwendungsstartvorgang fortgesetzt wird.
Die spezifischen Schritte sind wie folgt:
-
Importieren Sie es in die Moduldatei Ihrer Anwendung
APP_INITIALIZER.import { APP_INITIALIZER } from '@angular/core'; -
Erstellen Sie eine Initialisierungsfunktion, die beim Start der Anwendung ausgeführt wird. Diese Funktion kann beliebigen Code enthalten, den Sie beim Start der Anwendung ausführen müssen.
export function initializeApp() { // 在这里执行初始化操作 return () => { // 可选的清理代码 }; } -
Registrieren Sie die Initialisierungsfunktion als
APP_INITIALIZERAbhängigkeitsinjektionstoken.@NgModule({ declarations: [...], imports: [...], providers: [ { provide: APP_INITIALIZER, useFactory: initializeApp, multi: true, // 如果有多个初始化函数，设置为 true }, ], bootstrap: [...], }) export class AppModule { }
Im obigen Beispiel definieren wir eine initializeAppInitialisierungsfunktion mit dem Namen und registrieren sie als APP_INITIALIZERAnbieter von . multi: trueZeigt an, dass es mehrere Initialisierungsfunktionen geben kann und diese nacheinander in der Reihenfolge der Registrierung ausgeführt werden.
Beispiel
Um APP_INITIALIZERdie Rolle von besser zu verstehen, veranschaulichen wir dies anhand eines Beispiels. Angenommen, unsere Anwendung muss beim Start einige Konfigurationsdateien laden und diese Konfigurationen global verwenden.
Schritt 1: Konfigurationsdatei erstellen
Zuerst erstellen wir eine config.jsonKonfigurationsdatei mit dem Namen, die einige Anwendungskonfigurationsinformationen enthält, z. B. API-Adresse, Authentifizierungsschlüssel usw.
{
"apiUrl": "https://api.example.com",
"apiKey": "your-api-key"
}
Schritt 2: Konfigurationsdienst erstellen
Als Nächstes erstellen wir einen Konfigurationsdienst zum Laden und Speichern von Konfigurationsinformationen.
import {
Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ConfigService {
private config: any;
constructor() {
}
loadConfig() {
// 模拟异步加载配置文件
return fetch('/assets/config.json')
.then((response) => response.json())
.then((data) => {
this.config = data;
});
}
get apiUrl() {
return this.config.apiUrl;
}
get apiKey() {
return this.config.apiKey;
}
}
Im obigen Code erstellen wir eine Methode ConfigService, die loadConfigdie Konfigurationsdatei asynchron lädt und die Konfigurationsinformationen in configder Eigenschaft speichert.
Schritt 3: VerwendenAPP_INITIALIZER
Jetzt stellen wir APP_INITIALIZERsicher, dass die Konfigurationsdatei beim Start der Anwendung geladen wird.
import {
APP_INITIALIZER } from '@angular/core';
export function initializeApp(configService: ConfigService) {
return () => configService.loadConfig();
}
@NgModule({
declarations: [...],
imports: [...],
providers: [
ConfigService,
{
provide: APP_INITIALIZER,
useFactory: initializeApp,
deps: [ConfigService],
multi: true,
},
],
bootstrap: [...],
})
export class AppModule {
}
Im obigen Code haben wir eine initializeAppInitialisierungsfunktion mit dem Namen erstellt und ConfigServiceals übergeben 依赖注入. In der Initialisierungsfunktion rufen wir configService.loadConfig()die Methode zum Laden der Konfigurationsdatei auf.
Jetzt führt Angular bei jedem Start der Anwendung die Funktion aus, bevor die Anwendungsmodule geladen werden initializeApp, und stellt so sicher, dass die Konfigurationsdatei beim Start der Anwendung verfügbar ist.
Schritt 4: Konfigurationsinformationen verwenden
Jetzt können wir überall in der Anwendung ConfigServiceKonfigurationsinformationen abrufen.
import {
Component } from '@angular/core';
import {
ConfigService } from './config.service';
@Component({
selector: 'app-root',
template: `
<div>
API URL: {
{ configService.apiUrl }}
<br>
API Key: {
{ configService.apiKey }}
</div>
`,
})
export class AppComponent {
constructor(private configService: ConfigService) {
}
}
Im obigen Beispiel haben wir die API-URL und den API-Schlüssel AppComponenteingefügt ConfigServiceund verwendet, um sie anzuzeigen. Da wir verwenden APP_INITIALIZER, sind die Konfigurationsinformationen beim Start der Anwendung AppComponentvor dem Laden verfügbar.
Zusammenfassen
import { APP_INITIALIZER } from '@angular/core'Imported APP_INITIALIZERist ein von Angular bereitgestellter Mechanismus, um einige Initialisierungsaufgaben beim Start der Anwendung auszuführen. Indem wir eine Initialisierungsfunktion erstellen und diese als APP_INITIALIZERAnbieter registrieren, können wir sicherstellen, dass diese Aufgaben beim Start der Anwendung in der richtigen Reihenfolge ausgeführt werden. Dies kann für verschiedene Aufgaben wie das Laden der Konfiguration, das Festlegen globaler Variablen, das Initialisieren der Internationalisierungseinstellungen usw. verwendet werden, um sicherzustellen, dass sich die Anwendung beim Start im richtigen Zustand befindet. Durch das obige Beispiel
haben wir gezeigt, wie Sie APP_INITIALIZERdie Anwendungskonfiguration laden und in der gesamten Anwendung verwenden können. Dadurch wird sichergestellt, dass die Anwendung beim Start über die erforderlichen Konfigurationsinformationen verfügt, wodurch die Wartbarkeit und Skalierbarkeit der Anwendung verbessert wird.