Angular i18n中带@Input()的组件的翻译

Question

我有本质上是<ion-item>的组件，我可以在其他事物中传递标签。我想用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文本?

Answer 1

因为我不想使用ngx-translate，而是使用angular的默认翻译，这就是我所做的:

只需在i18n-后添加输入参数名称即可翻译。

<app-form-text i18n-labelIn
labelIn="TextToBeTranslated" 
[formControlIn]="formGroup.controls.someControl">
</app-form-text>

Answer 2

你必须加载

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

在app.module.ts

你可以使用translationservice，然后使用key-value text:

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

在你的页面中使用service并设置default- language:

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-translate