Смена языка ngx-translate не действует во всем приложении - PullRequest
Новая
       2

Смена языка ngx-translate не действует во всем приложении

1 голос
/ 01 июля 2019

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

Эксперты вводят, пожалуйста?

settings.ts 

import { Component, OnInit } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core'

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  public lang: string;
  constructor(private translate: TranslateService) {
    this.lang = "en";

    translate.setDefaultLang('en');

    let last = localStorage.getItem("selectedLang");
    // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use(last);
  }


  changeLanguage(value: string) {

    console.log(value);
    if (value == "German") {
      this.lang = "de";
      localStorage.setItem("selectedLang", this.lang);
      this.translate.use(this.lang);
    }

    if (value == "English") {
      this.lang = "en";
      localStorage.setItem("selectedLang", this.lang);
      this.translate.use(this.lang);
    }
  }
}

настройки html 

<div class="form-group">
  <label [innerHTML]="'description' | translate"></label>
  <p>Language for user interface and display data.</p>
</div>

html панели инструментов 

<div class="card card-small dash-warning">
      <h2>
        <i class="cis2-fa cis2-fa-dg-logo"></i>
      </h2>
      <span class="m-t-20" [innerHTML]="'dash.doc_gen_status' | translate"></span>
      <h2 class="upper-case bold" [innerHTML]="'dash.doc_gen_unavail' | translate">Unavailable</h2>
    </div>

app.module.ts 

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

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, ToasterModule.forRoot(), NgDynamicBreadcrumbModule, TooltipModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
  })],
  declarations: [AppComponent, DashboardComponent, HeaderComponent, SidebarComponent, LoginComponent],
  providers: [LoggerService, DataService, Title, ToasterService, { provide: APP_BASE_HREF, useValue: '/' }, Resolver, httpInterceptorProviders],
  bootstrap: [AppComponent]
})

app.routing.module.ts 

const routes: Routes = [
  {
    path: routePaths.login,
    component: LoginComponent
  },
  {
    path: routePaths.dashboard,
    component: DashboardComponent,
  },
  {
    path: routePaths.userProfile,
    loadChildren: './modules/userProfile/user-profile.module#UserProfileModule'
  },
  { path: '**', redirectTo: routePaths.login, pathMatch: 'full' }
];

user.profile.module.ts 

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

@NgModule({
  imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
    AgGridModule.withComponents([]), TooltipModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
  })],
  declarations: [SettingsComponent],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }

1 Ответ

2 голосов
/ 01 июля 2019

Это потому, что вы импортируете TranslateModule.forRoot в нескольких местах, что делает лениво загруженные модули собственными экземплярами TranslateService.

Что вам нужно сделать, это сохранить TranslateModule.forRoot в AppModule и любыедругой модуль, которому требуется TranslatePipe, просто импортирует TranslateModule.

TranslateService, который будет доступен для всех модулей и будет одноэлементным.Итак, измените UserProfileModule на этот 

@NgModule({
  imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
    AgGridModule.withComponents([]), TooltipModule,
    TranslateModule],
  declarations: [SettingsComponent],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }
...