JHipster应用程序中延迟加载的组件的i18n [英] i18n of lazy-loaded components in JHipster app

问题描述

JHipster ，因此语言服务是通过< JhiLanguageService >使用 JhiConfigService 进行配置的库ngx-translate，而无需在我的app.module中导入和配置TranslateModule.因此，当我将TranslateModule.forRoot(...)添加到AppModule的导入中时，一切都中断了，我到处都看到未找到翻译..."消息.

My App is based on JHipster and so the language services are provided by way of JhiLanguageService in the ng-jhipster library which uses a JhiConfigService to configure ngx-translate without my needing to import and configure the TranslateModule in my app.module. So when I add TranslateModule.forRoot(...) to imports of AppModule, everything breaks and I just see "translation not found..." messages everywhere.

我不知道如何让我的延迟加载页面使用与应用程序渴望加载的部分相同的翻译服务实例，以便更改导航栏渴望加载的组件中的语言会影响所使用的语言通过延迟加载的页面.

I don't know how to make my lazy-loaded pages use the same translation service instance as the eager-loaded part of the app so that changing the language in an eagerly-loaded component of the nav bar affects the language used by the lazy-loaded pages.

我研究了这个想法和这个想法，但是他们都规定在AppModule中配置TranslateModule会破坏它，并且我不知道如何在JHipster应用中控制ngx-translate配置.

I have looked into this idea and this idea but they both prescribe configuring TranslateModule in AppModule which breaks it and I don't know how to control ngx-translate configuration in a JHipster app.

推荐答案

我设法通过将BehaviorSubject添加到JhiLanguageHelper服务来修复延迟加载的模块中的翻译.

I managed to fix translation in my lazy loaded module by adding BehaviorSubject to the JhiLanguageHelper service.

@Injectable()
export class JhiLanguageHelper {
    renderer: Renderer2 = null;
    private _language: BehaviorSubject<string>;

    constructor(
        private translateService: TranslateService,
        private rootRenderer: RendererFactory2,
        private findLanguageFromKeyPipe: FindLanguageFromKeyPipe,
        private titleService: Title,
        private router: Router
    ) {
        this._language = new BehaviorSubject<string>(this.translateService.currentLang);
        this.renderer = rootRenderer.createRenderer(document.querySelector('html'), null);
        this.init();
    }

    getAll(): Promise<any> {
        return Promise.resolve(LANGUAGES);
    }

    get language(): Observable<string> {
        return this._language.asObservable();
    }

    updateTitle(titleKey?: string) {
        if (!titleKey) {
             titleKey = this.getPageTitle(this.router.routerState.snapshot.root);
        }

        this.translateService.get(titleKey).subscribe((title) => {
            this.titleService.setTitle(title);
        });
    }

    private init() {
        this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
            this._language.next(this.translateService.currentLang);
            this.renderer.setAttribute(document.querySelector('html'), 'lang', this.translateService.currentLang);
            this.updateTitle();
            this.updatePageDirection();
        });
    }

    private getPageTitle(routeSnapshot: ActivatedRouteSnapshot) {
        let title: string = (routeSnapshot.data && routeSnapshot.data['pageTitle']) ? routeSnapshot.data['pageTitle'] : 'hcmGatewayApp';
        if (routeSnapshot.firstChild) {
            title = this.getPageTitle(routeSnapshot.firstChild) || title;
        }
        return title;
    }

    private updatePageDirection() {
        this.renderer.setAttribute(document.querySelector('html'), 'dir', this.findLanguageFromKeyPipe.isRTL(this.translateService.currentLang) ? 'rtl' : 'ltr');
    }
}

您可以像这样在模块中订阅BehaviorSubject.

And you subscribe to the BehaviorSubject in your module like this.

export class YourModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => this.languageService.changeLanguage(languageKey));
    }
}

这篇关于JHipster应用程序中延迟加载的组件的i18n的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！