使用Angular的国际化(i18n)功能,可以轻松地在Angular应用程序中实现本地化。可以使用Angular的内置i18n工具将应用程序中用于本地化的所有文本提取到单独的语言文件中。在构建过程中,可以在运行之前编译并切换到所需的语言。以下是使用Angular CLI的一个示例:
import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
export class TranslationLoader implements TranslateLoader { constructor(private readonly http: HttpClient) { }
public getTranslation(lang: string): Observableassets/i18n/${lang}.json
);
}
}
@NgModule({ ... imports: [ ... TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslationLoader, deps: [HttpClient] } }), LocalizeRouterModule.forRoot(routes), ], ... })
// environment.ts (debug) export const environment = { production: false, locale: 'en', };
// environment.prod.ts (run) export const environment = { production: true, locale: 'de', };
import { TranslateService } from '@ngx-translate/core'; import { environment } from '../environments/environment';
export class AppComponent implements OnInit { constructor(private readonly translate: TranslateService) { }
public ngOnInit(): void { this.translate.setDefaultLang('en'); this.translate.use(environment.locale); } }
当开发时,将调试环境设置为“en”,当应用程序运行时,将生产环境设置为“de”。这个示例使用了ngx-translate和ngx-translate-router库来加载