Angular 多语言
参考文献 : https://zhuanlan.zhihu.com/p/346329015
安装
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
创建服务
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Injectable({ providedIn: 'root'})
export class TranslationService {
constructor(private translateService: TranslateService) {}
init(locale = 'en') {
this.translateService.addLangs(['en', 'de']);
this.translateService.use(locale);
}
}
可以使用event emitters 来监听对应的变化
onLangChange.subscribe(
(langChangeEvent: LangChangeEvent) => {
// TODO: Add language change event logic
});
onTranslationChange.subscribe(
(translationChangeEvent: TranslationChangeEvent) => {
// TODO: Add translation change event logic
});
onDefaultLangChange.subscribe(
(defaultLangChangeEvent: DefaultLangChangeEvent) => {
// TODO: Add default language change event logic
});
编写翻译文件
翻译文件放在src/assets/i18n目录,为json格式的文件。
{
"login": {
"username": "Username",
"password": "Password",
"loginButton": "Login",
"forgotPassword": "Forgot your password?",
"validationMessage": {
"usernameRequired": "Username is required",
"passwordRequired": "Password is required"
}
},
"home": {
"greeting: "Hello <strong>{{username}}</strong>"
},
"alert": {
"popupText": "You will be logged out in {{time}} seconds."
}
}
将ngx-translate引入我们的AppModule中
// Add necessary imports
import {APP_INITIALIZER} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslationService} from './shared/services/translation.service';
export function translationInitializer(translationService: TranslationService) {
return function () {
return translationService.init('en');
};
}
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
imports: [
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: translationInitializer,
deps: [TranslationService],
multi: true
}
]
})
export class AppModule {}
TranslationService 的初始化可以被2个方法呼叫。
- 使用APP_INITIALIZER ,并创建一个工厂方法来进行初始化
- 在app.component.ts中呼叫,例如
constructor(private translationService: TranslationService) { }
export class AppComponent implements OnInit{
ngOnInit(): void {
this.translationService.init('en');
}
}
使用方法
- 使用管道
<mat-label>{{'login.username' | translate}}</mat-label>
<input type="text" placeholder="{{'login.username' | translate}}" />
- 使用translate属性
<mat-error
translate="login.validationMessages.passwordRequired">
</mat-error>
- 使用指令
<div
[translate]="'HELLO '"
[translateParams]="{username: 'user123'}">
</div
4.服务的方式
import {TranslateService} from '@ngx-translate/core';
constructor(private translateService: TranslateService) { }
export component LoginComponent {
errorMsg: string;
login() {
const messageKey = 'usernameRequired';
this.translateService.get(`login.validationMsg.${messageKey}`)
.subscribe( message => this.errorMsg = message; );
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2020-06-09 msssql to pgsql 修改记录