[ngx转换在构造函数或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');

  }

而且我还有另一个home组件，在ngOnInit中我有一个table，表头是动态的。

不工作

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

Answer 1

您是否在app.module.ts中初始化了翻译TranslateModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,

        // ngx-translate and the loader module
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

在组件中，您可以使用它：

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
    }
}

Answer 2

您正在调用即时方法。调用时可能尚未加载翻译。您可以尝试使用诸如translate.get（'test'）之类的方法。然后订阅并等待翻译加载完毕，然后使用Instant（）。

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

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

如果要继续使用translateService而不使用管道，则需要在app_module的APP_INITIALIZERS中添加translateservice。当我们这样做时，它将在初始化组件之前初始化translateService，因此.instant（）函数将起作用。app.moduke.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 {

}