Dokumentation Angular

Angular

Integrieren Sie i1n mit Angular unter Verwendung des i1n SDK oder des Bridge-Modus mit ngx-translate.

Einrichtung

Führen Sie i1n init in Ihrem Angular-Projekt aus. Die CLI erkennt @ngx-translate/core automatisch, falls vorhanden, und konfiguriert das JSON-Format.

Übersetzungsdateien werden im Verzeichnis locales/ gespeichert und sind mit dem HttpLoader von ngx-translate kompatibel.

Eigenständiger Modus

Importieren Sie init und t von i1n und verwenden Sie sie direkt in Ihren Angular-Diensten und -Komponenten. Das i1n SDK funktioniert als leichte Alternative zu ngx-translate.

Stellen Sie t() über einen Angular-Dienst für die Dependency Injection bereit oder rufen Sie es direkt in Komponenten-Vorlagen auf.

Bridge-Modus mit ngx-translate

Wenn Ihr Projekt ngx-translate verwendet, verbinden Sie es mit: registerI1n((key, params) => translateService.instant(key, params)). Die i1n t()-Funktion delegiert an ngx-translate und bietet typsichere Autovervollständigung.

i1n verwaltet die Übersetzungsdateien und die Typengenerierung. ngx-translate kümmert sich weiterhin um das Laufzeit-Laden, das Translate-Pipe und den TranslateService. Ihre vorhandenen Vorlagen bleiben unverändert.

Bereitstellung

Fügen Sie den i1n-Pull zu Ihrem Build-Schritt hinzu. Die generierten Übersetzungsdateien sind mit dem erwarteten Format von ngx-translate kompatibel.

Für große Anwendungen organisieren Sie Übersetzungen nach Feature-Modul mithilfe von Namespace-Dateien.

src/app/app.component.ts
import { TranslateService } from '@ngx-translate/core';

@Component({
  template: '<h1>{{ "welcome" | translate }}</h1>'
})
export class AppComponent {
  constructor(private translate: TranslateService) {}
}
Bridge Mode — app.module.ts
import { registerI1n } from 'i1n'
import { TranslateService } from '@ngx-translate/core'

// In your AppComponent constructor:
registerI1n((key, params) => this.translate.instant(key, params))

Verwandt