Eine praktische Schritt-für-Schritt-Anleitung zur Verbesserung der dynamischen Lokalisierung (Auswahl von Sprachen) in einer Angular 4+ -Webanwendung mit @ ngx-translate / core .
Im Prinzip können Sie Veröffentlichungen zu einem ähnlichen Thema finden, die Dokumentation dieser Bibliothek mag ausreichen, aber ich wollte diese Anweisung für eine bequemere Anwendung systematisieren. Dieses Lesezeichen befindet sich im Sparschwein eines Angular-Anfängers. Am Ende des Artikels befindet sich ein Link zu einem offenen Repository mit einem Beispiel.
Warum genau ngx-translate
Ich möchte sofort reservieren, dies ist eine Anleitung zur Nutzung einer bestimmten Bibliothek. Wir werden nicht über Alternativen sprechen, dass der Winkel eine eigene i18n-Lokalisierung hat. Schon allein deshalb, weil bei einem dynamischen Sprachwechsel Fragen auftauchen.
Was bekommen wir am Ausgang?
*.json Ordner " assets/locale " befinden sich *.json Dateien mit Schlüsseln und ihren lokalisierten Werten, eine Datei für jede unterstützte Sprache in der Webanwendung.- Dynamischer Sprachwechsel
- Das Speichern von Schlüsseln in einer Objektstruktur hat ungefähr Folgendes:
// en.json { Common: { Yes: "Yes" } }
Auf diese Weise können Sie Schlüssel / Werte gruppieren und eine JSON-Datei mit Lokalisierung organisieren. Für große Projekte ist es sehr nützlich.
- Minimale Automatisierung und Suche nach einem Narren. Was ist, wenn Sie vergessen haben, den Schlüssel in json hinzuzufügen?
- Anwendung der Lokalisierung sowohl in HTML-Vorlagen als auch in ts-Code
Fertigen Sie besonders an
Wir erstellen oder realisieren ein fertiges Winkelprojekt. Die Version des Winkels ist 4+, aber es ist natürlich besser so frisch wie möglich.
Installieren Sie die erforderlichen Bibliotheken:
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save @biesbjerg/ngx-translate-extract --saveDev
Die Bibliothek @ngx-translate/http-loader wird benötigt, damit wir Lokalisierungsdaten aus *.json Dateien *.json können. Sie können ohne es leben, aber dann müssen Sie das Speichern und Laden von Lokalisierungsdaten völlig unabhängig schreiben. Dieser Ansatz eignet sich für diejenigen, bei denen Lokalisierungsdaten (oder einfach alle übersetzten Texte) bereits irgendwo gespeichert sind.
Die Bibliothek @biesbjerg/ngx-translate-extract ist optional, aber sehr nützlich. Sie können vergessene Lokalisierungsschlüssel anhand des Anwendungscodes erfassen und Lokalisierungsdateien aktualisieren. Die Verwendung eines solchen Szenarios ist sehr praktisch: Fügen Sie eine neue Sprache hinzu und führen Sie einfach den Befehl aus dieser Bibliothek aus. Infolgedessen wird die leere Datei für die neue Sprache mit der gesamten Struktur der Schlüssel und einigen Standardwerten gefüllt. Ein Beispiel wird unten sein.
- Importieren Sie die Bibliothek in das Hauptmodul:
@NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient], }, useDefaultLang: false, }) ], }) export class AppModule { }
Die HttpLoaderFactory in den Bibliothekseinstellungen vorhanden. Sie kann direkt in derselben Datei beschrieben werden und ist von bescheidener Größe.
export function HttpLoaderFactory(http: HttpClient): TranslateLoader { return new TranslateHttpLoader(http, './assets/locale/', '.json'); }
Hier geben wir den Pfad zu den Lokalisierungsdateien an. Wenn sie getrennt oder in verschiedenen Umgebungen unterschiedlich gespeichert werden, ändern Sie diesen Code, um beispielsweise environment.ts zu verwenden.
- Im Prinzip reicht dies für die Grundeinstellungen aus, aber wir werden einen weiteren zusätzlichen Schritt unternehmen - die Fehlerbehandlung, wenn der Schlüssel nicht gefunden wird.
Fügen Sie dazu der Konfiguration ein weiteres Feld hinzu (unmittelbar nach Angabe des Loaders):
missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MissingTranslationService },
Und natürlich müssen Sie die Implementierung dieses Handlers in einer separaten Datei erstellen:
export class MissingTranslationService implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { return `WARN: '${params.key}' is missing in '${params.translateService.currentLang}' locale`; } }
- Speicher für verfügbare Sprachen hinzufügen. Im einfachen Fall ist es bequem, sie in
environment.ts
locales: ['en', 'ru'], defaultLocale: 'en',
- Damit der Dienst funktioniert, muss er beim Laden der Anwendung in der AppComponent-Datei initialisiert werden:
@Component({...}) export class AppComponent implements OnInit { constructor(private translateService: TranslateService) {} ngOnInit(): void { this.translateService.use(environment.defaultLocale); } }
- Fügen Sie die Dateien
en.json und ru.json (entsprechend den Angaben in der Liste der verfügbaren Sprachen). Fügen Sie ein Basisfeld hinzu, damit es gültig ist.
Wenn diese Schritte ausgeführt werden, beginnt der Dienst zu funktionieren.
Wir nutzen den Service
HTML-Markup
Hier ist alles einfach. Die Bibliothek bietet Pipe- translate , wir wenden sie nur im Markup für bestimmte Schlüssel an.
<label>{{ 'LANGUAGES.TITLE' | translate }}</label>
Beachten Sie, dass ich hier die angehängten Eigenschaften verwende, die JSON-Struktur, über die ich am Anfang gesprochen habe.
Es werden auch Parameter unterstützt, siehe dazu bitte die Dokumentation @ ngx-translate / core . Mit Parametern können Sie so etwas wie eine String-Interpolation implementieren.
Im Komponentencode
this.translateService.get(['KEY1', 'KEY2'])) .subscribe(translations => { console.log(translations['KEY1']) console.log(translations['KEY2']) });
Dies ist ein zuverlässiger Weg, wenn Sie mit Observable und RxJs normal sind.
Wenn nicht, gibt es einen Weg:
this.translateService.instant('Key')
Diese Methode funktioniert gut, aber in der Initialisierungsphase der Anwendung (z. B. ngOnInit AppComponent) werden die Daten möglicherweise noch nicht geladen. Sei vorsichtig.
Unterstützung für JSON-Dateien
Am Ende möchte ich zeigen, wie das ngx-translate-extract . Führen Sie einfach den Befehl ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json in der Konsole. Dieser Befehl startet die Analyse von Anwendungsdateien, Markup und Timecode-Code. Alle im Markup und im anderen Code gefundenen Schlüssel fallen für alle Sprachen in .json. Die vorhandenen Schlüssel und ihre Werte bleiben unberührt, außer dass sich die Reihenfolge ändern kann.
Der Einfachheit halber füge ich dies als Skript in package.json hinzu
"scripts": { "ng": "ng", "start": "ng serve", "update-locale": "ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json" },
Alles, was ich beschrieben habe, ist in einem offenen Repository zusammengefasst: valentinkononov / ngx-translate-angular
Ich hoffe, das Material wird nützlich sein! Schreiben Sie gerne Code, wählen Sie praktische Bibliotheken und erstellen Sie nützliche Projekte!