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

Question

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

我的结构：

-> src -> app.module.ts
-> app.component.ts
-> shared/shared.module.ts
-> test/test.module.ts
/test.component.ts

应用程序模块.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 { }

应用程序组件.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);
}
}

共享.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 { }

测试模块.ts

import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [ 
*(some component)* 
],
imports: [ 
*(other modules)*, 
SharedModule, 
],
})
export class SharedModule { }

测试组件.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'
});

我试过一些东西，但都不管用。

Answer 1

在app.module.ts try:中

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