ngx-translate как изолировать сервис перевода - PullRequest
Новая
       39

ngx-translate как изолировать сервис перевода

0 голосов
/ 16 марта 2020

Моя цель - импортировать модуль с другим компонентом в мое приложение angular. Импортированный модуль может использоваться в различных приложениях, а также должен поддерживать разные языки. При импорте модуля в проект angular разработчику не нужно заботиться о файлах перевода, и для этого я импортировал TranslateModule из ngx-translate в этот дочерний модуль со следующей конфигурацией: 

import {ModuleWithProviders, NgModule, Optional, SkipSelf} from '@angular/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {RouterModule, Routes} from '@angular/router';
import { LoginMaskComponent } from './login/login.component';
import { SettingsComponent } from './settings/settings.component';
import {ValidationGuard} from './validation.guard';
import {OtLoginServiceConfiguration} from './ot-login.service';
import {CommonModule} from '@angular/common';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

const LOGIN_ROUTES: Routes = [
  { path: 'login', component: LoginMaskComponent },
  { path: 'settings', component: SettingsComponent, canActivate: [ValidationGuard] }
];

@NgModule({
  declarations: [
    LoginMaskComponent,
    SettingsComponent
  ],
    imports: [
        RouterModule.forChild(LOGIN_ROUTES),
        HttpClientModule,
        TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [ HttpClient ]
          },
          isolate: true
        }),
        CommonModule
    ],
  exports: [
    LoginMaskComponent,
    SettingsComponent
  ]
})

export class OtLoginModule {}

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

В проекте angular, где используется этот дочерний модуль, конфигурация TranslateModule выглядит следующим образом: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OtLoginModule } from 'ot-login';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [ HttpClient ]
      },
      isolate: true
    }),
    OtLoginModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

Но теперь я все еще сталкиваюсь с проблемой, что переводы angular будут использоваться приложения, но не переводы дочернего модуля. Что я делаю неправильно? Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 16 марта 2020

Чтобы это работало, вы должны go до лениво загруженные модули . Без этого он не будет работать.

См. этот пост от Fabien и этот рабочий пример на GitHub с Angular 8.

Но учтите также, что с этим дизайном вы должны установить язык по умолчанию для каждого модуля. Также, конечно, каждый модуль будет извлекать свои собственные переводы, так что это может повлиять на производительность (задержка в сети).

...