如何使用@ngx-translate/core在Angular@11应用中实现不同区域多语种同时翻译

方案1：使用多实例TranslateService（推荐） #

@ngx-translate默认的TranslateService是根级单例，因此全局只能同时生效一种语言，你可以通过子注入器为每个面板创建独立的服务实例实现需求：

• 左右两个面板分别封装为独立的特性模块，各自在模块内导入 TranslateModule.forChild()
• 在左侧面板组件的初始化逻辑中，注入当前子模块的TranslateService实例，单独调用use('es')方法加载西班牙语翻译包
• 在右侧面板组件的初始化逻辑中，调用自身注入的TranslateService实例的use('de')方法加载德语翻译包
• 模板中正常使用{{ '翻译key' | translate }}管道即可，管道会自动匹配当前组件所属注入器的TranslateService配置，互不干扰

方案2：自定义支持指定语言的翻译管道 #

如果不想改动现有TranslateService的全局配置，可以封装自定义翻译管道实现按需指定语种：

• 新建名为multiTranslate的自定义管道，内部直接调用TranslateService的资源读取方法，接收翻译key、目标语言两个入参
• 管道逻辑中跳过全局当前语言的判断，直接根据传入的语言代码匹配对应的翻译资源返回
• 左侧面板模板写法：{{ '翻译key' | multiTranslate: 'es' }}，右侧面板模板写法：{{ '翻译key' | multiTranslate: 'de' }}
• 该方案改造成本极低，适合仅少数页面需要多语种并行的场景

方案3：预加载多语种资源手动映射 #

如果两个面板的翻译内容很少，可以直接预加载所需的两个语种资源手动调用：

• 在页面组件初始化时，分别调用translateService.getTranslation('es')、translateService.getTranslation('de')预加载西语、德语的全部翻译资源，存入组件的两个独立属性中
• 模板中直接按对象属性读取：左侧{{ esTranslation['翻译key'] }}，右侧{{ deTranslation['翻译key'] }}

注意：如果你的项目其他模块还需要保留全局统一语言的能力，优先选择多实例方案，不会和现有全局翻译逻辑产生冲突。

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