Angular语言 - 在添加了嵌套路由出口后，我从ngx-translate的翻译停止了工作

Question

我在标题中提到的问题(在此更改期间，我没有更改翻译中的任何内容)

主路由出口是在应用的app组件中创建的，嵌套的那个(子)是在子组件中，路由目前可以正常工作。

遗憾的是，在实现之后，我的翻译不再工作。

项目相当大，所以请告诉我你想让我附上什么来解决这个问题(也许有人有类似的东西)

例如，现在这是共享模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReservationButtonComponent } from './components/reservation-button/reservation-button.component';
import { MatIconModule} from '@angular/material/icon';
import { MenuButtonComponent } from './components/menu-button/menu-button.component';
import { MatButtonModule } from '@angular/material/button';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { PageSectionComponent } from './components/page-section/page-section.component';
import { PageSectionButtonComponent } from './components/page-section/components/page-section-button/page-section-button.component';
import { PageSectionLinkComponent } from './components/page-section/components/page-section-link/page-section-link.component';
import { BookingSectionComponent } from './components/booking-section/booking-section.component';
import { LogoComponent } from './components/logo/logo.component';
import { MenuComponent } from './components/menu/menu.component';
import { MatToolbarModule } from '@angular/material/toolbar';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
ReservationButtonComponent,
MenuButtonComponent,
PageSectionComponent,
PageSectionButtonComponent,
PageSectionLinkComponent,
BookingSectionComponent,
LogoComponent,
MenuComponent
],
imports: [
CommonModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [
ReservationButtonComponent,
MenuButtonComponent,
PageSectionComponent,
BookingSectionComponent,
LogoComponent,
MenuComponent
]
})
export class SharedModule { }

和共享模块中的组件使用翻译(在添加嵌套路由器出口之前，它工作正常):

<div class="booking-popup">
<img class="booking-rating-image"src="../../../../../assets/logo/booking/Booking.com_logo.svg">
<div class="booking-rating">{{bookingRating.getNumber()}}</div>
<div class="booking-rating-text">{{bookingRating.getLabel() | translate }}</div>
</div>

Answer 1

我建议这样初始化TranslateModule:

TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (http: HttpClient) =>
new TranslateHttpLoader(http, './assets/i18n/', `.json?v=${new Date().getTime()}`),
deps: [HttpClient],
},
}),

然后将您的翻译文件设置为json文件:

{
"demo": {
"title": "Translation demo",
"text": "This is a simple demonstration app for ngx-translate"
}
}

设置语言的组件应该看起来像这样:

export class LanguageDropDownComponent implements OnInit {
supportLanguage = ['de', 'en'];
language: string = 'en';
constructor(public translate: TranslateService) {
translate.addLangs(this.supportLanguage);
translate.setDefaultLang(this.language);
this.translate.use(this.language);
}
onSelected(lang: string) {
this.translate.use(lang);
}
ngOnInit(): void {
// This is intentional
}
}

在您的模板中，您可以使用

访问翻译

{{ "demo.title" | translate }}

"Lingua - Managing ngx-translations"one_answers"ngx-translation -utils"是VS-Code中防止任何打字错误的伟大扩展。如果您还有其他问题，请告诉我。