在整个应用程序中，NGX - 翻译语言变化均不影响

Question

我已经创建了使用仪表板和设置等页面的应用程序。现在，当我更改语言选项时，我想在整个应用程序中更改语言。但它仅适用于我称之为语言更改功能的设置页面，而不是在仪表板页面中。

专家输入？

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 { }

Answer 1

这是因为您在多个位置导入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 { }