HTML元素中的管道翻译器 [英] Pipe Translater in Html Element

问题描述

所以，不知道是否有人可以帮助我.我在html中有以下代码行:

So, dont know if anyone can help me. I have the below line of code in html :

<ion-item class="item-style">
  <ion-label>{{ 'SettingsPage.ChangeLanguage' | translate }}</ion-label>
  <ion-select [(ngModel)]="language" (ionChange)="onLanguageChange();" cancelText={{cancelText}} okText={{okText}}>
    <ion-select-option value="en">{{ 'SettingsPage.English' | translate }}</ion-select-option>
    <ion-select-option value="mt">{{ 'SettingsPage.Maltese' | translate }}</ion-select-option>
  </ion-select>
</ion-item>

和.ts中的以下方法:

and the following methods in the .ts :

 onLanguageChange() {
this.translate.use(this.language);
console.log(this.language);
this.globalVariableService.languageChanged = true;
this.globalVariableService.setCurrentLanguage(this.language);
this.storage.set('Language', this.language).then(() => {
  this.sectorDataServiceProvider.populateSectorData().then(data => {
    console.log('this.sectorInfo ', this.sectorDataServiceProvider.sectorInfo);
  });
});
this.setOkAndCancelText();

}

setOkAndCancelText() {
    if (this.language === 'en') {
      this.cancelText = 'Cancel';
      this.okText = 'OK';
    } else if (this.language === 'mt') {
      this.cancelText = 'Le';
      this.okText = 'Iva';
    }
  }

我希望删除s setOkAndCancelText()，当应用程序中的语言更改时，该setOkAndCancelText()用于填充cancelText = {{cancelText}}参数，并具有类似于以下内容的内容:

I wish to remove the s setOkAndCancelText() which is being used to fill the cancelText={{cancelText}} parameter when the language changes within the app, and have something similar to:

<p [innerHTML]="'TermsOfUsePage.Header' | translate"></p>

请问有什么办法可以实现这一目标?

Any ideas how i can make this possible please?

推荐答案

我们已经通过以下方式做到了:

We have done it in following ways:

• 安装了以下软件包:

"@ ngx-translate/core":"11.0.1"

"@ngx-translate/core": "11.0.1"

"@ ngx-translate/http-loader":"4.0.0"，

"@ngx-translate/http-loader": "4.0.0",

• 在app.module.js中，在导入中添加以下内容:

 TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: AppHttpLoaderFactory,
            deps: [HttpClient]
          }
        }),

export function AppHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, Environment.frontend('/assets/i18n/'), '.json');
}

在这里，我们将en.json文件保存在i18n文件夹下，其中所有文本键值都在其中.

Here we have kept our en.json file under i18n folder where all key values of text are there.

之后，您可以在html模板中使用它:

After this you can use it in html template:

<ion-select [(ngModel)]="language" (ionChange)="onLanguageChange();" cancelText={{'cancel.text' | translate }} okText={{okText}/>

此处 cancel.text 是en.json文件中的密钥.

Here cancel.text is a key in en.json file.

这篇关于HTML元素中的管道翻译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！