如何使用 ngx-translateservice 翻译打字稿中的方法答案

【问题标题】：How can I use ngx-translateservice to translate method in typescript如何使用 ngx-translateservice 翻译打字稿中的方法
【发布时间】：2021-08-08 12:45:33
【问题描述】：

我试图用这个问题Angular ngx-translate usage in typescript 中的所有这些示例来解决我的任务我不知道如何将 TranslateService 连接到我的方法。

瑞典语翻译文件se.json（无钥匙）

{
    NAME: Namn
}

英文翻译文件en.json（无键）

{
    NAME: Name
}

打字稿：

从“@ngx-translate/core”导入{ TranslateService }；

constructor {
 private translate: TranslateService
} {
    this.translate.use(localStorage.getItem("language")); // Get selected language
}

我要翻译的方法：

setColumns(): void {
  this.loggedInUserType = Meteor.user().profile.user_type;
  if (this.type === "history") {
    this.columns = [
      { header: "NAME" },
      { header: "TOTALSUM" },
      { header: "VAT" },
      { header: "INVOICES" },
    ];
  } else if (this.type === "clients") {
    this.columns = [
      { header: "NAME" },
      { header: "ORGANIZATIONNUMBER" },
      { header: "CITY" },
      { header: "COUNTRY" },
      { header: "ACTIONS" },
   ];
    this.getClients();
  }
}

【问题讨论】：

标签： typescript ngx-translate

【解决方案1】：

app.module.ts

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}

export class TranslateHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    /* some logic */
  }
}

export function appInitializerFactory(translateService: TranslateService, injector: Injector): () => Promise<any> {
  // tslint:disable-next-line:no-any
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      translateService.use(localStorage.getItem("language") || window.navigator.language) // here u can change language loaded before reander enything
        .pipe(take(1))
        .subscribe(() => {},
        err => console.error(err), () => resolve(null));
    });
  });
}

@NgModule({
    imports: [
        ...,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (HttpLoaderFactory),
                deps: [HttpClient]
            },
            isolate: false,
            missingTranslationHandler: [{provide: MissingTranslationHandler, useClass: TranslateHandler}]
        }),
    ]
    providers: [
        ...,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFactory,
            deps: [TranslateService, Injector],
            multi: true
        }
    ]
})
export class AppModule {}

在组件的模块中添加TranslationModule
在组件构造函数public ts: TranslateService) {}

现在你可以使用了：

this.ts.instant('YOUR_KEY'); // return translated string or your key if translation not founded, but u can change logic in TranslateHandler

存储在 assets/i18n/ 中的所有翻译。例如 en.json

【讨论】：