Html 元素中的管道翻译

所以，不知道是否有人可以帮助我。我在 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';
    }
  }

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

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

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

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

@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}}>