如何在库中使用 ngx-translate

Question

我在我的应用程序中做了一个库，我们称它为

user_setting

，它负责显示用户的数据。

问题出在

translation

。我在我的导航菜单中定义了一个

Setting

项目，当用户打开它时，会显示一个包含两个按钮的页面，即

device_setting

和

user_setting

。当用户点击

user_setting

时，库被打开，库中的标签被翻译，但是当用户返回应用程序时，应用程序中的标签不再被翻译！

有趣的是，如果我直接从主导航菜单打开图书馆（通过在主导航中添加

user setting

），翻译在图书馆和应用程序中都有效。

换句话说，如果图书馆作为导航菜单中的一个项目打开，翻译在图书馆和应用程序中都能完美运行。但是，如果库是从应用程序的页面内部打开的，那么除非我关闭并重新打开应用程序，否则应用程序翻译将无法正常工作。

这里是 user_setting.module.ts:

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

import { UserSettingComponent } from './user-setting.component';
import { UserSettingRoutingModule } from './user-setting-routing.module';

@NgModule({
  imports: [
    TranslateModule.forRoot(),
    UserSettingRoutingModule,
  ],
  declarations: [UserSettingComponent]
})
export class UserSettingModule {}

这里是 user-setting.component.ts:

import { TranslateService } from '@ngx-translate/core';
...
export class UserSettingComponent implements OnInit{

  constructor( private translate: TranslateService){}

  ngOnInit() {
    this.init(this.translate); // adding this line, the translation in the app wont work, removing it the translatin in the library wont work 
    this.translate.use('en');
  }

  init(translate: TranslateService) {
    translate.setTranslation('en', this.en_data);    
  }
}

有人知道是什么问题吗？谢谢！

Answer 1

你应该使用：https://angular.io/guide/singleton-services

用户设置.module.ts

@NgModule()
export class UserSettingModule {
  static forRoot(config: {translateService: TranslateService}): ModuleWithProviders<UserSettingModule> {
    return {
      ngModule: UserSettingModule,
      imports: [<some_imports>],
      declarations: [UserSettingComponent],
      exports: [<some_exports>],
      providers: [
        {provide: 'TRANSLATE_SERVICE', useValue: config.traslateService}
      ]
    };
  }
}

app.module.ts

@NgModule({
  imports: [UserSettingModule.forRoot({ translateService: TranslateService })],
})
export class AppModule {}

用户设置.component.ts

export class UserSettingComponent {
  constructor(@Inject('TRANSLATE_SERVICE') translateService: TranslateService) {}
}