基于Angular/localize按服务端域值动态替换字符串

完全可以通过@angular/localize实现这个需求，核心是利用本地化的翻译映射机制，结合业务域动态加载对应翻译配置，具体方案如下：

• 统一标记需要替换的字符串
  不管是HTML标签内容、matTooltip属性还是函数内的字符串，都用同一个消息ID（@@folder）标记：

  • 模板中：

    <div i18n="@@folder">folder</div>
    <button matTooltip="folder" i18n-matTooltip="@@folder"></button>
    

  • 组件类中：

    const displayText = $localize`:@@folder:folder`;
    

• 为不同业务域维护翻译文件
  针对每个业务域创建独立的XLF翻译文件：

  • GENERAL域（默认）的messages.general.xlf保持原有配置：

    <trans-unit id="folder" datatype="html">
      <source>folder</source>
      <target>folder</target>
    </trans-unit>
    

  • LEGAL域的messages.legal.xlf将目标值替换为"job"：

    <trans-unit id="folder" datatype="html">
      <source>folder</source>
      <target>job</target>
    </trans-unit>
    

  • ARCHITECTURE域如果不需要替换，直接复用GENERAL的翻译即可。

• 根据服务端返回的域值动态加载翻译
  在应用初始化阶段，获取服务端返回的业务域值后，调用loadTranslations加载对应翻译文件：

  import { loadTranslations } from '@angular/localize';
  
  // 假设从服务端接口获取业务域值
  const currentDomain = await fetchDomainFromServer();
  
  switch(currentDomain) {
    case 'LEGAL':
      import('./messages.legal.xlf').then(trans => loadTranslations(trans.default));
      break;
    case 'ARCHITECTURE':
    case 'GENERAL':
    default:
      import('./messages.general.xlf').then(trans => loadTranslations(trans.default));
      break;
  }
  

这样配置后，当业务域为LEGAL时，所有标记了@@folder的内容都会自动替换为"job"，GENERAL和ARCHITECTURE域则保持原有的"folder"显示。

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