Angular多语言切换初始previous language为null需双击生效问题排查

问题根因 #

• 未初始化默认语言：仅声明默认使用法语，但组件初始化阶段没有向LocalStorage的LX_Current_Language写入初始值fr，也没有给TranslateService设置默认语言，首次读取该存储key自然返回null。
• 重复订阅语言变更事件：switchLanguage方法每次被调用都会新增一个onLangChange事件订阅，没有销毁旧订阅，既会引发内存泄漏，也会导致回调逻辑多次触发、时序混乱。
• 页面刷新时机错误：调用translate.use()后立刻执行页面刷新，onLangChange的回调逻辑（写入存储）还没执行完成就触发了页面跳转，新的语言配置还没持久化就重载了页面，就是需要点击两次EN才生效的直接原因。
• 模板变量错误：HTML中遍历语言列表的变量是l，但插值表达式错误使用了未定义的language变量，会导致所有语言选项显示异常。

修复方案 #

1. 修正组件逻辑 #

将语言变更订阅移到初始化阶段，新增默认语言初始化逻辑，调整执行时序：

export class AuthLayoutComponent implements OnInit, OnDestroy {
  supportedLangs: string[];
  private langChangeSub: Subscription; // 用于销毁订阅，避免内存泄漏

  constructor(
    public _router: Router,
    private translate: TranslateService,
    private LS: LocalStoreService,
    public _location: Location
  ) { }

  ngOnInit() {
    this.supportedLangs = ['fr', 'nl', 'en', 'de', 'es', 'it', 'pt'];
    const defaultLang = 'fr';
    // 初始化语言配置
    const savedLang = this.LS.getItem('LX_Current_Language');
    if (!savedLang) {
      // 无历史存储时写入默认法语
      this.LS.setItem('LX_Current_Language', defaultLang);
      this.translate.setDefaultLang(defaultLang);
      this.translate.use(defaultLang);
    } else {
      // 有历史存储时使用存储的语言
      this.translate.use(savedLang);
    }

    // 全局仅订阅一次语言变更事件
    this.langChangeSub = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      this.LS.setItem('LX_Current_Language', event.lang);
      console.log("Click on the current language  => " + event.lang); 
      // 确认语言配置写入完成后再刷新，若翻译支持热更新可直接删除refresh调用，无需刷新页面
      this.refresh();
    });
  }

  switchLanguage(lang: string) {
    if (lang === 'uk') {
      lang = 'en';
    }
    // 打印切换前的历史语言，此时存储中为上一次的语言值
    console.log("Previous language : " + this.LS.getItem('LX_Current_Language'));
    this.translate.use(lang);
  }

  refresh(): void {
    this._router.navigateByUrl("/refresh", { skipLocationChange: true }).then(() => {
      this._router.navigate([decodeURI(this._location.path())]);
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.langChangeSub?.unsubscribe();
  }
}

2. 修正HTML模板变量 #

将插值表达式的变量改为遍历生成的l：

<div class="languageSelect">
   <a href="#" *ngFor="let l of supportedLangs;" (click)="switchLanguage(l); false; ">
        {{ l | uppercase}}
   </a>
 </div>

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