本文详细介绍了如何在Angular项目中实现多语言切换，使用ngx-translate库进行国际化。从安装模块、配置加载器到翻译文件的创建，以及在组件中初始化、切换语言的方法，同时展示了使用服务、管道和指令的方式应用翻译。文章还提到了instant()方法用于即时翻译，并强调了使用时需要注意翻译文件是否已加载完成。
angular的国际化方案，采用ngx-translate来实现。
安装模块：
npm install @ngx-translate/core --save
在根模块中导入：
// other module
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
// other module
TranslateModule.forRoot(),
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
我们希望可以在一个固定的文件里面配置对应的翻译文件，然后在每个用到的组件里面使用它，随意我们需要借助TranslateHttpLoader来加载翻译文件。首先安装TranslateHttpLoader:
npm install @ngx-translate/http-loader --save
翻译文件可以放在/assets/i18n/[lang].json中，[lang]代表使用的语言文件名称。然后我们可以在跟组件中添加配置对应的加载项：
// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定义加载方法
最低0.47元/天 解锁文章
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
