使用ngx-translate时如何将登录页选中语言同步至所有组件

实现方案 #

你只需要做4处调整即可实现语言全局生效，无需每个页面重复配置：

1. 确保I18nConfigService为全局单例 #

确认你的I18nConfigService的@Injectable装饰器配置如下，保证整个应用共用同一个服务实例：

@Injectable({
  providedIn: 'root' // 核心配置，确保全局单例
})
export class I18nConfigService {
  // 原有代码
}

如果是在根模块AppModule的providers数组里注册的服务也可以，只要不是在单个组件的providers里注册就行。

2. 新增语言配置持久化逻辑 #

修改I18nConfigService，将选中的语言存入localStorage，避免页面刷新/跳转后配置丢失，修改后的完整代码如下：

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Injectable({
  providedIn: 'root'
})
export class I18nConfigService {
  // 优先读取本地存储的语言，没有则用默认英文
  currentLang = localStorage.getItem('selectedLang') || 'en';
  translateService: TranslateService;

  setSelectedLanguage(language: string) {
    this.currentLang = language;
    // 选中语言后存入本地存储
    localStorage.setItem('selectedLang', language);
    this.applyLanguage(this.currentLang);
  }

  private applyLanguage(language: string) {
    this.translateService.use(language);
  }

  getLanguages() {
    return this.translateService.getLangs();
  }

  constructor(translateService: TranslateService) {
    this.translateService = translateService;
  }

  setUpConf() {
    this.translateService.addLangs(['en', 'te', 'kn', 'hi']);
    this.translateService.setDefaultLang(this.currentLang);
    this.applyLanguage(this.currentLang);
  }
}

3. 调整初始化逻辑到根组件 #

不要在语言下拉组件里调用setUpConf，把初始化逻辑移到根组件AppComponent中，保证应用启动就加载全局语言配置：

AppComponent.ts 代码：

import { Component, OnInit } from '@angular/core';
import { I18nConfigService } from './对应路径/i18n.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private i18nConf: I18nConfigService) {}

  ngOnInit() {
    // 应用启动就初始化i18n配置
    this.i18nConf.setUpConf();
  }
}

然后修改语言下拉组件的代码，删掉重复的初始化调用：

LanguageDropdown.ts 修改后代码：

import { Component } from '@angular/core';
import { I18nConfigService } from './对应路径/i18n.service';

@Component({
  // 原有组件配置
})
export class LanguageDropdownComponent {
  i18nConf: I18nConfigService;

  constructor(i18nConf: I18nConfigService) { 
    this.i18nConf = i18nConf;
    // 删掉原来的this.i18nConf.setUpConf()调用，避免重复初始化
  }
}

4. 其他组件直接使用翻译即可 #

后续所有页面组件无需额外配置i18n，直接注入TranslateService或者在模板中用translate管道就能拿到当前选中的语言对应的翻译内容，语言状态全局共享。

修改后用户在登录页选择语言后，配置会存入本地存储，跳转登录后的所有页面都会自动应用选中的语言，刷新页面也不会失效。

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