ngx 翻译 - 在 ts 文件中使用 get 或 instant 方法不起作用

Question

我正在使用导入到其他模块的 sharedModule，因此我正在尝试对所有文件使用 ngx-translate。在 app.component.ts 中，get 方法运行良好，但在 test.component.ts 中则不然。奇怪的是 html 文件中的管道（ | translate ）运行良好。就像线程在 app.component.ts 中执行 this.translateService.use(lang); 停止并转到 test.component.ts 的 this.translate.get('testTranslation') 一样，失败然后返回到 app.component.ts 并且它工作。目前，我的代码看起来像这样：

我的结构：

-> src -> app.module.ts
       -> app.component.ts

       -> shared/shared.module.ts

       -> test/test.module.ts
              /test.component.ts

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { SharedModule } from '../shared/shared.module';
import { TestModule } from '../test/test.module';

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

@NgModule({
declarations: [ *(some component)* ],
imports: [ 
    *(other modules)*, 
    SharedModule, 
    TestModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
        },
    }) 
],
})
export class AppModule { }

app.component.ts

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

constructor() {
    const lang = window.navigator.language;
    try {
      this.translateService.setDefaultLang(lang);
      this.translateService.use(lang);
      this.translate.get('testTranslation').subscribe((res: string[]) => { // instant doesn't work too
      console.log(res); // expected: 'Translation Works'
                        // result: 'Translation Works'
    } catch (e) {
        console.log('Language file is not found: ' + lang, e);
    }
}

shared.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

@NgModule({
declarations: [ *(some component)* ],
imports: [ 
    *(other modules)*, 
    SharedModule, 
    TranslateModule.forChild({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
        },
    }) 
],
exports: [
    TranslateModule
],
})
export class SharedModule { }

test.module.ts

import { SharedModule } from '../shared/shared.module';

@NgModule({
declarations: [ 
    *(some component)* 
],
imports: [ 
    *(other modules)*, 
    SharedModule, 
],
})
export class SharedModule { }

test.component.ts

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

  constructor(private translate: TranslateService) {
  }

  ngOnInit(): void {
    this.translate.get('testTranslation').subscribe((res: string[]) => { // instant doesn't work too
      console.log(res); // expected: 'Translation Works'
                        // result: 'testTranslation'
    });

我尝试了一些方法，但 none 有效。

Answer 1

在app.module.ts尝试：

import {APP_INITIALIZER, Injector, NgModule} from '@angular/core';
import {LOCATION_INITIALIZED} from '@angular/common';
@NgModule({
    ...,
    providers: [
        ...,
        {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFactory,
            deps: [TranslateService, Injector],
            multi: true
        }
    ]
})
export class AppModule {}

// tslint:disable-next-line:no-any
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(window.navigator.language)
        .pipe(take(1))
        .subscribe(() => {},
        err => console.error(err), () => resolve(null));
    });
  });
}

ngx 翻译 - 在 ts 文件中使用 get 或 instant 方法不起作用

ngx translate - Using get or instant method in ts file is not working

typescript

ngx-translate

angular