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

问题描述

我有本质上是 <ion-item> 的组件，我可以向其中传递标签。我想使用 i18n 翻译标签。
这是一个精简的示例：

@H_404_5@<app-form-text labelIn="TextToBeTranslated" [formControlIn]="formGroup.controls.someControl"> </app-form-text> @H_404_5@<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-translate

,

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

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

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