[英]ngx-translate how to isolate translate service
我的目標是將帶有另一個組件的模塊導入到我的 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 應用程序的翻譯,而不是子模塊的翻譯。 我究竟做錯了什么? 有人能幫我嗎?
要使其正常工作,您應該轉到延遲加載模塊。 沒有它,它就行不通。
請參閱Fabien 的這篇文章,以及GitHub 上使用 Angular 8 的這個工作示例。
但還要注意,使用這種設計,您必須為每個模塊設置默認語言。 當然,每個模塊都會獲取自己的翻譯,因此它可能會影響性能(網絡延遲)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.