Ionic 4项目中ngx-translate在Android设备失效求助

嘿，我之前也碰到过一模一样的问题——浏览器里翻译好好的，打包成APK装到Android上就直接显示home.add_dress这种键名了。结合你的代码，给你几个肯定能解决问题的方向：

1. 先确认翻译文件被打包进Android包了 #

90%的概率是这个原因！Angular构建时默认可能没把assets/i18n目录完整复制到输出文件夹里。你得去angular.json里手动配置一下：

找到architect > build > options > assets这部分，把i18n目录加进去：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {"glob": "**/*", "input": "src/assets/i18n", "output": "assets/i18n"}
]

这样构建时所有src/assets/i18n下的json文件都会被复制到APK的assets/i18n路径里，Android WebView就能找到了。

2. 调整TranslateHttpLoader的路径 #

有时候Android WebView对相对路径的解析和浏览器不一样，把createTranslateLoader里的路径改成更明确的写法：

修改app.module.ts里的工厂函数：

export function createTranslateLoader(http: HttpClient) {
  // 用./开头确保从index.html所在目录找资源
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

3. 修复语言初始化的异步问题 #

你在app.component.ts里从storage取语言时，如果是第一次启动APP，val会是undefined，这时候translate.setDefaultLang(undefined)就会出问题。给个默认值，同时记得调用use()方法（setDefaultLang是兜底语言，use才是设置当前使用的语言）：

this.storage.get('current_language').then((val) => {
  console.log(val);
  this.language = val || 'en'; // 兜底用英文
  this.translate.setDefaultLang('en'); // 设置默认 fallback
  this.translate.use(this.language); // 激活当前语言
});

4. 别用页面刷新来切换语言 #

你现在用window.location.reload()切换语言，不仅体验差，还可能导致Android下翻译文件加载异常。直接用translateService.use()就行，管道会自动刷新所有翻译内容：

修改home.page.ts的languageChange方法：

languageChange(lang) {
  console.log(lang);
  this.storage.set('current_language', lang);
  this.language = lang;
  this.translateService.use(this.language); // 直接切换，无需刷新
}

先试前两个方法，尤其是第一个，基本能解决你的问题。如果还不行，再检查后面的点。

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