angular - ngx translate 在构造函数或 ngOnit 中不起作用

Question

我有一个导航栏，有多种语言，在 app.component

constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');

  }

我有另一个家庭组件，在 ngOnInit 我有一个表，表头是动态的。

不工作

ngOnInit() {
  this.cols = [

        { field: 'productID', header: this.translateService.instant('productID') },
    }

但它在按钮点击中运行良好：

buttonClicked(){

 this.cols = [

            { field: 'productID', header: this.translateService.instant('productID') },
        }

console.log(this.translateService.instant('productID'));

}

我发现的另一个解决方案是在每个组件中执行以下订阅方法并获取需要翻译的键的翻译值

constructor( private translateService:TranslateService) {

      this.translateService.use('fr');


    this.translateService.get(
      ['productID',],

      )
      .subscribe(val => {
      console.log( val['productID']);

      });

     }

示例：寻找更好的解决方案 https://stackblitz.com/edit/ngx-translate-example-h6uypw?file=src/app/home/home.component.ts

标签： angularangular-translatengx-translate

Answer 1

您正在调用即时方法。调用它时可能尚未加载翻译。您可以尝试使用 translate.get('test') 之类的东西。然后订阅并等待翻译加载完毕，然后使用instant()。

您也可以使用翻译管道而不是翻译服务

<h3>{{ "HOME.Description" | translate}} </h3>

如果要继续使用 translateService 而不是使用 Pipe，则需要在 app_module 的 APP_INITIALIZERS 中添加 translateservice。当我们这样做时，它将在初始化组件之前初始化 translateService，因此 .instant() 函数将起作用。app.module.ts 的代码如下（根据stackblitz url上公布的代码）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateModule, TranslateLoader, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HomeComponent } from './home/home.component';
import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);

  //return new TranslateHttpLoader(httpClient, 
    //environment.feServerUrl + '/assets/i18n/', '.json'); 
}
export function translateFactory(translate: TranslateService) {
  return async () => { 
                translate.setDefaultLang('en-US');
        translate.use('en-US');
        return new Promise(resolve => {
            translate.onLangChange.subscribe(() => {
                resolve();
            });
        });
    };
}

@NgModule({
  declarations: [
    AppComponent,HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: translateFactory,
      deps: [TranslateService],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

}