ngx-translate在Angular类库中使用异常：主应用翻译失效问题

核心原因有两点： #

1. 类库模块错误使用TranslateModule.forRoot()
TranslateModule.forRoot()是Angular库中用于根模块初始化单例服务的方法，只能在根模块（比如AppModule）中调用一次。你在user_setting类库模块中使用forRoot()，会导致TranslateService被重复注册，打破了Angular的单例服务模式，引发主应用和类库之间的翻译服务实例冲突，进而导致主应用的翻译状态被篡改。

2. setTranslation默认覆盖已有翻译数据
   你在init方法中调用的translate.setTranslation('en', this.en_data)，默认第三个参数replace为true——这意味着它会完全替换当前语言（'en'）下的所有翻译条目，而不是和主应用已有的翻译合并。

• 当从Setting页面打开类库时，主应用已经加载了自身的英文翻译，此时类库的setTranslation会把主应用的翻译全部覆盖成类库的en_data，返回主应用后，主应用找不到自己的翻译键，自然翻译失效。
• 直接从主导航打开类库时，主应用的翻译可能还未完成加载，或者后续主应用重新加载了自己的翻译，所以两者翻译都能正常显示。

修复步骤： #

1. 类库模块改用TranslateModule.forChild()
   修改user_setting.module.ts中的导入，确保类库共享主应用的TranslateService单例：

import { TranslateModule } from '@ngx-translate/core';
import { UserSettingComponent } from './user-setting.component';
import { UserSettingRoutingModule } from './user-setting-routing.module';

@NgModule({
  imports: [
    TranslateModule.forChild(), // 替换原有的TranslateModule.forRoot()
    UserSettingRoutingModule,
  ],
  declarations: [UserSettingComponent]
})
export class UserSettingModule {}

2. 调用setTranslation时开启合并模式
   在init方法中添加第三个参数false，让类库的翻译和主应用的翻译合并，而非替换：

init(translate: TranslateService) {
  translate.setTranslation('en', this.en_data, false); // 开启合并模式
}

3. 可选：避免翻译键冲突
   为类库的翻译键统一添加前缀（比如user-setting.），比如把'title'改成'user-setting.title'，这样即使主应用有相同的键名，也不会互相干扰。

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