ngx translate не работает в конструкторе или ngOnit - PullRequest
Новая
       44

ngx translate не работает в конструкторе или ngOnit

0 голосов
/ 29 апреля 2020

У меня есть панель навигации, есть несколько языков, в 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 у меня есть таблица, заголовок таблицы динамический c .

не работает 

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

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

есть ли у вас инициализация перевода TranslateModule в вашем app.module.ts: 

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');
    }
}

Дополнительно: в конструкторе ваших переводов возможно, еще не загружен.

Используйте другой хук жизненного цикла, например

ngAfterContentInit ()

0 голосов
/ 29 апреля 2020

Вы вызываете мгновенный метод. Возможно, когда вы звоните, переводы еще не загружены. Вы можете попробовать использовать что-то вроде translate.get ('test'). Затем подпишитесь и дождитесь загрузки переводов, а затем используйте Instant ().

Вы также можете использовать переводчик вместо службы перевода 

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

Если вы хотите продолжать использовать translateService, а не используйте Pipe, тогда вам нужно добавить translateservice в APP_INITIALIZERS в app_module. Когда мы сделаем это, он инициализирует translateService перед инициализацией вашего компонента и, следовательно, будет работать функция .instant (). Код для app.module.ts выглядит следующим образом (в соответствии с кодом, опубликованным на URL-адресе stackblitz): 

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 {

}
...