结合localize-router，如何在ngx-translate中从翻译值取对应键？

首先得明确：ngx-translate的TranslationService本身并没有内置的从翻译值反向获取原键的方法（比如getKeyByValue这类），因为翻译系统的设计是多键可能对应同一值，反向查找存在歧义，所以官方没有提供这个功能。不过我们可以自己实现一个高效的反向映射方案，替代你现在遍历所有翻译记录的方式。

优化方案：提前构建反向翻译映射表 #

与其每次查询都遍历所有数据库翻译记录，不如在应用初始化时就把当前语言的翻译键值对转换成反向映射（翻译值 -> 原键），之后直接通过这个映射表快速查找，性能会好很多。

步骤1：创建自定义反向翻译服务 #

我们可以封装一个服务，负责构建和维护反向映射：

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

@Injectable({ providedIn: 'root' })
export class TranslateReverseLookupService {
  // 存储各语言的反向映射：{ 语言代码: { 翻译值: 原键 } }
  private reverseMaps: Record<string, Record<string, string>> = {};

  constructor(private translateService: TranslateService) {
    // 监听语言切换，实时更新反向映射
    this.translateService.onLangChange.subscribe(() => {
      this.buildReverseMapForCurrentLang();
    });
    // 初始化时构建当前语言的映射
    this.buildReverseMapForCurrentLang();
  }

  private buildReverseMapForCurrentLang() {
    const currentLang = this.translateService.currentLang;
    // 获取当前语言的所有翻译数据（使用`*`作为键可以获取全部）
    const allTranslations = this.translateService.instant('*');
    
    this.reverseMaps[currentLang] = {};
    // 遍历所有翻译键值对，构建反向映射
    this.traverseTranslations('', allTranslations, currentLang);
  }

  // 处理嵌套的翻译对象（比如翻译文件里的层级结构）
  private traverseTranslations(parentKey: string, translations: any, lang: string) {
    Object.entries(translations).forEach(([key, value]) => {
      const fullKey = parentKey ? `${parentKey}.${key}` : key;
      if (typeof value === 'string') {
        // 注意：如果多个键对应同一个翻译值，后面的会覆盖前面的
        // 你可以根据业务逻辑调整，比如存数组或者保留特定前缀的键
        this.reverseMaps[lang][value] = fullKey;
      } else if (typeof value === 'object' && value !== null) {
        this.traverseTranslations(fullKey, value, lang);
      }
    });
  }

  // 对外暴露的反向查找方法
  getOriginalKey(translationValue: string): string | undefined {
    const currentLang = this.translateService.currentLang;
    return this.reverseMaps[currentLang]?.[translationValue];
  }
}

步骤2：在组件/路由中使用这个服务 #

比如在你的组件里，通过ActivatedRoute拿到slug后，直接用这个服务获取原键：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TranslateReverseLookupService } from './translate-reverse-lookup.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private reverseLookupService: TranslateReverseLookupService
  ) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const slug = params.get('slug');
      if (slug) {
        // 反向获取原键
        const originalKey = this.reverseLookupService.getOriginalKey(slug);
        if (originalKey) {
          // 用原键去数据库查询数据
          this.fetchDataByKey(originalKey);
        } else {
          // 处理找不到对应原键的情况（比如404）
          this.handleInvalidSlug();
        }
      }
    });
  }

  // 你的数据库查询方法
  private fetchDataByKey(key: string) {
    // ...
  }

  private handleInvalidSlug() {
    // ...
  }
}

进阶：用路由Resolve守卫提前处理slug #

如果想在组件加载前就完成slug到原键的转换，可以用Angular的路由Resolve守卫，这样组件直接拿到处理后的原键：

创建Resolve守卫 #

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { TranslateReverseLookupService } from './translate-reverse-lookup.service';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SlugToKeyResolver implements Resolve<string | undefined> {
  constructor(private reverseLookupService: TranslateReverseLookupService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<string | undefined> {
    const slug = route.paramMap.get('slug');
    if (!slug) return of(undefined);
    return of(this.reverseLookupService.getOriginalKey(slug));
  }
}

更新路由配置 #

import { Routes } from '@angular/router';
import { YourComponent } from './your-component.component';
import { SlugToKeyResolver } from './slug-to-key.resolver';

const routes: Routes = [
  {
    path: ':slug',
    component: YourComponent,
    resolve: { originalKey: SlugToKeyResolver }
  }
];

组件中获取解析后的原键 #

ngOnInit() {
  this.route.data.subscribe(data => {
    const originalKey = data.originalKey;
    if (originalKey) {
      this.fetchDataByKey(originalKey);
    } else {
      this.handleInvalidSlug();
    }
  });
}

注意事项 #

1. 翻译值重复问题：如果多个原键对应同一个翻译值，反向映射会覆盖之前的键。你可以根据业务需求调整，比如把值对应的键存为数组，或者优先保留特定前缀的键（比如page.*开头的）。
2. 异步翻译加载：如果你的翻译文件是异步加载的，建议用APP_INITIALIZER确保翻译数据加载完成后再构建反向映射，避免初始时映射为空。

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