添加嵌套路由出口后ngx-translate翻译失效问题求助

添加嵌套路由出口后，ngx-translate翻译完全失效，期间未修改任何翻译相关代码。应用主路由出口位于AppComponent，嵌套路由出口在子组件内，路由功能运行正常。因项目规模较大，以下是排查所需的信息清单，同时附上当前SharedModule代码及使用翻译的组件示例：

排查需提供的信息 #

• 完整的路由配置文件（包含主路由与嵌套路由的定义）
• 嵌套路由所在组件的模板代码（确认<router-outlet>的使用方式）
• AppModule的完整代码（检查TranslateModule的导入配置）
• 嵌套路由加载的子组件所属模块代码（确认是否重复导入TranslateModule.forRoot()或forChild()）
• 浏览器控制台的报错信息及网络请求日志（验证翻译文件是否正常加载）
• TranslateService的初始化逻辑（如AppComponent中设置默认语言的代码）
• 翻译失效组件所在模块的导入配置（确认是否导入了SharedModule或TranslateModule）

现有提供的代码 #

SharedModule代码 #

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>

内容的提问来源于stack exchange，提问作者Yardi