Angular应用程序在调试和运行时具有两个不同的本地化设置
使用Angular的国际化（i18n）功能，可以轻松地在Angular应用程序中实现本地化。可以使用Angular的内置i18n工具将应用程序中用于本地化的所有文本提取到单独的语言文件中。在构建过程中，可以在运行之前编译并切换到所需的语言。以下是使用Angular CLI的一个示例：
- 在app.module.ts文件中导入LocalizeRouterModule和TranslateLoader：
import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
- 配置TranslateLoader：
export class TranslationLoader implements TranslateLoader { constructor(private readonly http: HttpClient) { }
public getTranslation(lang: string): Observableassets/i18n/${lang}.json);
}
}
- 在@NgModule装饰器中添加TranslateModule和LocalizeRouterModule：
@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', };
- 在app.component.ts中导入environment并设置i18n：
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库来加载