angular项目如何配置国际化（i18n）？

1、下载ngx-translate的依赖库

//利用npm来安装ngx-translate依赖

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

2、在项目根模块app.module.ts中引入引入TranslateModule模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';//引入TranslateModule模块
import {TranslateModule,TranslateLoader,TranslateService
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';//配置i18n
export function createTranslateLoader(http: HttpClient) {return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({declarations: [AppComponent],imports: [BrowserModule,HttpClientModule,TranslateModule.forRoot({//配置i18nloader: {provide: TranslateLoader,useFactory: createTranslateLoader,deps: [HttpClient]}})],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

3、注入TranslateService 服务

【3.1】可在app.module.ts文件中注入TranslateService

import {TranslateService} from '@ngx-translate/core';

【3.2】

import { BrowserModule } from '@angular/platform-browser';
import {Inject, LOCALE_ID, NgModule} from '@angular/core';import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from "@angular/common/http";
import {IonicModule} from "@ionic/angular";
import {CookieModule} from "ngx-cookie";
import {AppRoutingModule} from "./app-routing.module";
import { MyHomeComponent } from './components/my/my-home/my-home.component';
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
import {environment} from "../environments/environment";
import { ProductListComponent } from './components/loan/product-list/product-list.component';export function TranslateLoaderFactory(http: HttpClient) {return new TranslateHttpLoader(http, "./assets/i18n/", "/loan.json?time=" + new Date().getTime());
}export function LocaleIdFactory() {return navigator.language;
}@NgModule({declarations: [AppComponent,MyHomeComponent],imports: [BrowserModule,HttpClientModule,FormsModule,ReactiveFormsModule,HttpModule,AppRoutingModule,IonicModule.forRoot(),CookieModule.forRoot(),TranslateModule.forRoot({//translateModule配置loader: {provide: TranslateLoader,useFactory: TranslateLoaderFactory,deps: [HttpClient]}}),DirectiveModule],providers: [{provide: LOCALE_ID,useFactory: LocaleIdFactory},EnvService,RestService,ToastService,UserService,JanusMobileService,PoseidonService,ToolService,ModalService,LocalApiService],entryComponents: [ModalTemplateComponent],bootstrap: [AppComponent]
})
//全局可使用
export class AppModule {constructor(private i18n: TranslateService, @Inject(LOCALE_ID) locale: string) {if (environment.supportedLocale.indexOf(locale) === -1) {locale = "en-US";}this.i18n.use(locale);}
}

4、创建国际化json文件：

根据根模块app.module.ts的配置，我们应该在assets文件中再创建一个文件夹i18n，然后在i18n的文件夹下创建国际化文件，可以是en.json(英文)、zh_cn.json(中文)、zh_tw.json(中国台湾)，this.translate.use('en')用的就是en.json翻译文件，如果要使用其他两个翻译文件就是this.translate.use('zh_cn')、this.translate.use('zh_tw')

zh_CN.json{"app.tab.loan": "借款","app.tab.my": "还款","common.btn.agree": "同意","hestia.department.detail.title":"部门详情 - {{name}}"
}

en_US.json{"app.tab.loan": "loan","app.tab.my": "payment","common.btn.agree": "agree","hestia.department.detail.title":"Department - {{name}}"
}

5、使用i18n

在component页面中使用：
<ion-label>{{"app.tab.loan" | translate}}</ion-label>

参数形式：
<app-page-title>{{"hestia.department.detail.title" | translate: {name: department?.name} }}
</app-page-title>

angular项目如何配置国际化（i18n）？相关推荐

springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(*￣rǒ￣)~,项目中碰到这类需求的童鞋可能并 ...
Docker+Nginx部署Angular国际化i18n
Docker+Nginx部署Angular国际化i18n 在Angular项目中添加default.conf文件 default.conf 为了支持局域网,增加一个域名,即本地的局域网ip地址. se ...
项目国际化I18N多语言切换
作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换. 一.了解I18N 1.什么是I18N i18n(其来源是英文单词 ...
Python中国际化(i18n)完整指南
这是一个完整的指南,展示了如何为一个Python应用程序进行国际化(i18n).当我在handroll项目中添加i18n时,我很难找到支持其他语言的明确建议.这是我个人的一点经验,解释了我是如何做到这 ...
Ionic+Angular实现中英国际化(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
Vue项目如何实现国际化？分享一下基于vue-i18n实现国际化的经验
vue项目如何实现国际化?分享一下基于vue-i18n实现国际化的经验 demo源码链接:https://github.com/XieTongXue/how-to/tree/master/vue-in ...
Spring Boot基础学习笔记10：配置国际化页面
文章目录零.学习目标 1.掌握使用Thymeleaf配置国际化页面 2.掌握Thymeleaf复杂数据的展示一.使用Thymeleaf配置国际化页面 (一)创建Spring Boot项目 - Th ...
SpringBoot RESTful 风格 API 多语言国际化i18n解决方案
文章目录 1 摘要 2 核心代码 2.1 多语言枚举类 2.2 多语言处理工具类 2.3 多语言的API返回状态码枚举类 2.4 多语言 API 接口返回结果封装 2.5 i18n 国际化多语言配置文 ...
SpringBoot -＞国际化(i18n)
文章目录上结果 1.准备工作配置文件编写配置文件生效探究配置页面国际化值配置国际化解析总结:我可能骗了你们,这个看了我都总结不出什么东西上结果 1.准备工作先在IDEA中统一设置pro ...
angular搭建项目步骤_建立健康的Angular项目应采取的步骤
angular搭建项目步骤 by Ashish Gaikwad 通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to buil ...

angular项目如何配置国际化（i18n）？

angular项目如何配置国际化（i18n）？相关推荐

最新文章

热门文章