[英]Angular i18n translation for component with @Input()
我的组件本质上是<ion-item>
si 可以传递 label 等等。 我想使用 i18n 翻译标签。
这是一个精简的示例:
<app-form-text
labelIn="TextToBeTranslated"
[formControlIn]="formGroup.controls.someControl">
</app-form-text>
<ion-item>
<ion-label>
<h2>{{ labelIn }}</h2>
</ion-label>
<ion-input [formControl]="formControlIn"></ion-input>
</ion-item>
如何翻译labelIn
文本?
你必须加载
import { TranslateModule } from '@ngx-translate/core';
在 app.module.ts
您可以将翻译服务与键值文本一起使用:
src/assets/i18n/en.json
{
"Sitetitle": "Angular Multi Language Site",
"Name": "Name",
"NameError": "I am sure you must have a name!",
"Email": "Email address",
"PhoneNo": "Phone No",
"Password": "Password",
"Bio": "Enter bio",
"TermsConditions": "I agree to terms and conditions.",
"Submit": "Submit"
}
还有de.json
在您的页面中使用服务并设置默认语言:
export class AppComponent {
constructor(
public translate: TranslateService
) {
translate.addLangs(['en', 'de']);
translate.setDefaultLang('en');
}
}
通过以下方式切换语言:
switchLang(lang: string) {
this.translate.use(lang);
}
use it in your view:
<div class="container">
<form>
<div class="form-group">
<label>{{'Name' | translate}}</label>
<input type="text" class="form-control">
<small class="text-danger">{{'NameError' | translate}}</small>
</div>
<div class="form-group">
<label>{{'Email' | translate}}</label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>{{'PhoneNo' | translate}}</label>
<input type="tel" class="form-control">
</div>
参考ngx-翻译
由于我不想使用 ngx-translate 而是使用 angulars 默认翻译,这就是我所做的:
只需在i18n-
后添加输入参数名称即可进行翻译。
<app-form-text i18n-labelIn
labelIn="TextToBeTranslated"
[formControlIn]="formGroup.controls.someControl">
</app-form-text>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.