Html 元素中的管道转换器

Question

所以，不知道有没有人可以帮助我。我在 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 中的以下方法：

 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() ，它在应用程序内的语言发生变化时用于填充 cancelText={{cancelText}} 参数，并且具有类似于：

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

有什么想法可以让这成为可能吗？

Answer 1

我们通过以下方式做到了：

安装了以下软件包：

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

"@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 文件夹下，文本的所有键值都在那里。

之后你可以在html模板中使用它：

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

这里cancel.text是en.json文件中的一个key。

Answer 2

您可以创建自定义服务并添加本地字符串，即键和值，而不是依赖于库，如下所示：

@Injectable({
    providedIn: 'root'
})
export class LocalizationService {
    localizedStrings: any;

    constructor() {
        this.localizedStrings = {
            en: {
                SettingsPage: {
                    cancelText: 'Cancel'
                }
            },
            mt: {
                SettingsPage: {
                    cancelText: 'Le'
                }
            }
        }
    }

    getResource(keyString: string, workingLanguage: string): Promise<string> {
        return new Promise((resolve, reject) => {
            let resourceValue = null;
            if(this.localizedStrings[workingLanguage].hasOwnProperty(keyString)) {
                resourceValue = this.localizedStrings[workingLanguage][keyString];
            } else {
                resourceValue = this.getPropertyByKeyPath(this.localizedStrings[workingLanguage], keyString);
                // if(!resourceValue) {
                //     debugger;
                // }
            }

            if(resourceValue) {
                resolve(resourceValue);
            } else {
                resolve(keyString);
            }
        });        
    }

    private getPropertyByKeyPath(targetObj, keyPath) { 
        var keys = keyPath.split('.');
        if(keys.length == 0) return undefined; 

        keys = keys.reverse();
        var subObject = targetObj;
        while(keys.length) {
            var k = keys.pop();
            if(!subObject.hasOwnProperty(k)) {
                return undefined;
            } else {
                subObject = subObject[k];
            }
        }
        return subObject;
    }  
}

注意是灵活的，可以深入对象。现在只需为此服务创建一个管道：

import { Pipe } from '@angular/core';

import { LocalizationService } from '../shared/localization.service';

    @Pipe({
      name:"translate"
    })
    export class LocalizedResourcePipe {
        constructor(private localizationService: LocalizationService) {

        }

        transform(resourceKey: string, workingLanguage: string) {
            return new Promise((resolve, reject) => {
                if(!resourceKey) {
                    resolve();
                } else {
                    this.localizationService.getResource(resourceKey, workingLanguage)
                    .then((value) => {
                        resolve(value); 
                    });
                }
            });
        }
    }

现在只需在您的 HTML 中调用它：

<ion-select [(ngModel)]="language" (ionChange)="onLanguageChange();" cancelText={{'SettingsPage.cancelText' | translate: 'en' | async}} okText={{'SettingsPage.cancelText' | translate: 'en' | async}}>

您也可以使语言参数动态化，并在管道中为其指定默认值。无论如何，这是用您的其他语言调用它的方法：

<ion-select [(ngModel)]="language" (ionChange)="onLanguageChange();" cancelText={{'SettingsPage.cancelText' | translate: 'mt' | async}} okText={{'SettingsPage.cancelText' | translate: 'mt' | async}}>

Answer 3

试试这个stackblitz example

翻译服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TranslateService {
  data: any = {};

  constructor(private http: HttpClient) { }

  use(lang: string): Promise<{}> {
    return new Promise<{}>((resolve, reject) => {
      const langPath = `assets/languageFiles/${lang || 'en'}.json`;
      this.http.get<{}>(langPath).subscribe(
        translation => {
          this.data = Object.assign({}, translation || {});
          resolve(this.data);
        },
        error => {
          this.data = {};
          resolve(this.data);
        }
      );
    });
  }
}

翻译管道

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from './translate.service';

@Pipe({
  name: 'translate',
  pure:false
})
export class TranslatePipe implements PipeTransform {

  constructor(private translate: TranslateService) {}
  transform(key: any): any {
    return this.translate.data[key] || key;
  }

}

Html 元素中的管道转换器

Pipe Translater in Html Element

html

element

pipe

ionic-framework

angular