Angular自定义翻译加载器中无法获取查询参数的问题

嘿，我懂你碰到的糟心事了！你在ngOnInit里能顺顺利利拿到查询参数加载资源，可自定义翻译加载器里却掉链子，对吧？其实核心问题就是时机不对——你的翻译加载器在应用初始化阶段就被创建了，这时候路由查询参数的订阅回调可能还没来得及执行，getTranslation就已经被调用了，导致tenant和sp还是空值，自然拼不出正确的请求地址。

我给你调整下代码，把这个问题解决掉：

首先，我们用RxJS的BehaviorSubject来缓存查询参数的状态，确保getTranslation只有拿到有效参数后才发起请求，同时兼顾初始路由快照和后续参数变化的情况：

import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Observable, BehaviorSubject, filter, switchMap } from 'rxjs';
import { environment } from '../environments/environment';

export class TranslationFileLoader implements TranslateLoader {
  // 用BehaviorSubject存储租户和服务提供商的配置，初始值为null
  private config$ = new BehaviorSubject<{ tenant: string; sp: string } | null>(null);

  constructor(private http: HttpClient, private actRoute: ActivatedRoute) {
    // 先同步从路由快照拿初始参数，避免订阅延迟的问题
    const initialParams = this.actRoute.snapshot.queryParams;
    if (initialParams.tenant && initialParams.sp) {
      this.config$.next({
        tenant: initialParams.tenant.replace(/[.]/g, ''),
        sp: initialParams.sp.toLowerCase()
      });
    }

    // 订阅后续查询参数的变化，支持路由切换后更新翻译配置
    this.actRoute.queryParams.subscribe(params => {
      if (params.tenant && params.sp) {
        this.config$.next({
          tenant: params.tenant.replace(/[.]/g, ''),
          sp: params.sp.toLowerCase()
        });
      }
    });
  }

  getTranslation(lang: string): Observable<any> {
    // 等待配置参数到位后，再发起翻译文件请求
    return this.config$.pipe(
      // 过滤掉空值，确保拿到有效配置才继续
      filter(config => config !== null),
      // 用switchMap切换到http请求Observable
      switchMap(config => {
        // 拼出正确的翻译文件地址（这里补全了lang.json后缀，你可根据实际情况调整）
        const translationUrl = `${environment.blobUrl}/${config.tenant}/i18n/${config.sp}/${lang}.json`;
        return this.http.get(translationUrl);
      })
    );
  }
}

为什么这样改能解决问题？ #

1. 同步拿初始参数：通过route.snapshot.queryParams同步获取初始路由的查询参数，避免了订阅回调延迟导致的参数为空问题。
2. 用BehaviorSubject缓存状态：它会保存最新的配置值，即使getTranslation先被调用，也会等待配置到位后再执行请求。
3. 支持参数更新：如果后续路由的查询参数变化，订阅会自动更新配置，翻译请求也会使用新的参数。

另外，如果你想确保应用初始化时就加载好翻译文件，避免页面出现未翻译的文本，可以在AppModule里配置APP_INITIALIZER，让应用等待翻译加载完成后再启动：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule } from '@angular/common/http';
import { TranslationFileLoader } from './translation-file.loader';
import { TranslateService } from '@ngx-translate/core';

// 初始化函数：等待翻译服务加载指定语言的文件
export function translateInitializer(translateService: TranslateService): () => Promise<any> {
  return () => translateService.use('en').toPromise();
}

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslationFileLoader,
        deps: [HttpClient, ActivatedRoute]
      }
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: translateInitializer,
      deps: [TranslateService],
      multi: true
    }
  ]
})
export class AppModule { }

这样调整后，你的翻译加载器就能正确拿到查询参数，加载对应的翻译文件啦！

备注：内容来源于stack exchange，提问作者chastain