NGX Translate in .Ts File - Angular

问题

Currently I have this method in one of my .ts files:

 clearFavourites() {
    if (this.language === 'en') {
      this.dialogs.confirm('Do you want to clear your favourite apps?', 'Clear Favourites', ['Yes', 'No'])
        .then(val => {
          console.log('Dialog dismissed' + val);
          if (val === 1) {
            this.resetFavIcons();
            this.storage.remove('FavAppList');
            this.storage.set('FavHasChanged', 'yes');
          }
        })
        .catch(e =>
          console.log('Error displaying dialog', e)
        );
    } else if (this.language === 'mt') {
      this.dialogs.confirm('Trid tneħħi l-apps tiegħek mill-favoriti?', 'Neħħi minn Favoriti', ['Iva', 'Le'])
        .then(val => {
          console.log('Dialog dismissed' + val);
          if (val === 1) {
            this.resetFavIcons();
            this.storage.remove('FavAppList');
            this.storage.set('FavHasChanged', 'yes');
          }
        })
        .catch(e =>
          console.log('Error displaying dialog', e)
        );
    }
  }
}

I already have ngx trasnlate installed and i am already using the translate pipe in html. I would like to use the same for this method to remove the if and else for checking the language and just have something similar to:

clearFavourites() {
    this.dialogs.confirm('SettingsPage.RemoveFav' | translate, 'SettingsPage.ClearFav' | translate, ['SettingsPage.Yes' | translate, 'SettingsPage.No' | translate])
        .then(val => {
          console.log('Dialog dismissed' + val);
          if (val === 1) {
            this.resetFavIcons();
            this.storage.remove('FavAppList');
            this.storage.set('FavHasChanged', 'yes');
          }
        })
        .catch(e =>
          console.log('Error displaying dialog', e)
        );
    }
}

The above method is not working for me, is there another way I can use the ngx translate pipe in a .ts file similar to the method above?

回答1:

Based upon this answer, you can inject the service like following:

constructor(private localizationSvc: LocalizationService) {
}

and then you can use the getResource method to get your resources in component:

const translatedText = await this.localizationSvc.getResource('SettingsPage.cancelText', 'en');

Note: This answer is based upon last answer i referenced above. So make sure to copy code from there.

回答2:

So I managed to find an answer to my question.

I changed my code to:

  clearFavourites() {
    this.dialogs.confirm(this.translate.instant('SettingsPage.AskFavs'), this.translate.instant('SettingsPage.ClearFavs'), [this.translate.instant('SettingsPage.Yes'), this.translate.instant('SettingsPage.No')])
      .then(val => {
        console.log('Dialog dismissed' + val);
        if (val === 1) {
          this.resetFavIcons();
          this.storage.remove('FavAppList');
          this.storage.set('FavHasChanged', 'yes');
        }
      })
      .catch(e =>
        console.log('Error displaying dialog', e)
      );
  }
}

and managed to get a dynamic text translation in a ts file.

Hope this helps others as well.

来源：https://stackoverflow.com/questions/58852071/ngx-translate-in-ts-file-angular

标签

angular

translate