我的目标是将带有其他组件的模块导入我的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/');
}
在有角项目的地方,使用了这个子模块,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/');
}
但是现在我仍然面临问题,将使用角度应用程序的平移,而不使用子模块的平移。我究竟做错了什么?有人可以帮我吗?
要使其正常工作,您应该转到lazy loaded modules。没有它,它将无法工作。
请参见this post from Fabien,以及此working example on GitHub和Angular 8。
但也请注意,使用这种设计,您必须为每个模块设置默认语言。当然,每个模块还将获取自己的翻译,因此可能会影响性能(网络延迟)。