Angular5+Firebase项目中通过routerLink传参配置ngx-translate问题

好的，我来帮你搞定这个问题！你已经成功把选中的语言参数传到了 /perfil 页面的URL里，接下来只需要两步就能把这个参数用在 ngx-translate 上：获取路由参数 + 配置翻译服务。

首先，你需要在目标组件（也就是 PerfilComponent）里注入 ActivatedRoute 和 TranslateService，然后在组件的 ngOnInit 生命周期钩子中拿到路由里的语言参数。

代码示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-perfil',
  templateUrl: './perfil.component.html',
  styleUrls: ['./perfil.component.css']
})
export class PerfilComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private translate: TranslateService
  ) { }

  ngOnInit(): void {
    // 订阅路由参数变化（适合参数可能动态更新的场景）
    this.route.paramMap.subscribe(params => {
      const selectedLang = params.get('lang');
      if (selectedLang) {
        // 拿到语言参数后，配置翻译服务
        this.setupTranslate(selectedLang);
      } else {
        // 如果没获取到参数，设置默认语言
        this.translate.setDefaultLang('en'); // 替换成你的默认语言，比如'es'
      }
    });

    // 如果你确定参数只会在组件初始化时加载一次，也可以用快照直接获取：
    // const selectedLang = this.route.snapshot.paramMap.get('lang');
    // if (selectedLang) this.setupTranslate(selectedLang);
  }

  private setupTranslate(lang: string): void {
    // 设置当前使用的语言
    this.translate.use(lang);
    // 可选：把语言存在localStorage，下次登录不用重新选择
    localStorage.setItem('userLang', lang);
  }
}

还要确保你的 AppModule 里已经正确配置了 TranslateModule，能正常加载对应语言的翻译文件（比如放在 assets/i18n/ 下的 en.json、es.json 等）：

示例配置（AppModule）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 翻译文件加载器
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en' // 全局默认语言
    })
  ],
  // ...其他模块、组件配置
})
export class AppModule { }

如果希望用户下次登录时不用重复选择语言，可以在登录成功时就把语言存入本地存储，然后在应用初始化时优先读取：

在登录组件的登录方法里新增一行：

form_login(f:NgForm){
 if (!f.valid) return;
 this.afAuth.auth.signInWithEmailAndPassword(f.controls.email.value, f.controls.password.value)
 .then(ok => {
   const selectedLang = f.controls.lang.value;
   localStorage.setItem('userLang', selectedLang); // 新增这行，持久化语言选择
   this.router.navigate(["/perfil", selectedLang]);
 });
}

然后在 AppComponent 的 ngOnInit 里添加：

ngOnInit(): void {
  // 优先读取本地存储的语言，没有则用默认值
  const savedLang = localStorage.getItem('userLang') || 'en';
  this.translate.use(savedLang);
}

这样用户下次打开应用时，会自动使用上次选择的语言，体验更流畅~

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