【发布时间】:2019-06-26 09:35:16
【问题描述】:
我正在使用Ionic Framework 创建一个应用程序,并且我正在尝试在没有可用互联网连接时使尽可能多的应用程序可以离线工作。
所以在第一次加载应用程序时,我希望它从服务器下载翻译,然后将它们存储在数据目录中。然后在后续加载时,应用程序将与服务器检查是否有新的翻译文件可用并根据需要下载。
一旦保存在数据目录中,我想将 ngx-translate 配置为在调用 getTranslation 时从数据目录中的那些 JSON 文件中读取。
到目前为止,我已经设法创建了一个自定义加载器并配置了 ngx-translate 以使用这个自定义加载器。我还设法从一个位置获取翻译文件并将它们保存在另一个位置。目前,我没有将它们从服务器中拉出,而是将它们从应用程序 www 目录移动到数据目录,因为我还没有设置服务器环境,因此同时尝试尽可能多地“模拟”功能。
getTranslation(lang: string): Observable<any> {
const subDirectory = 'i18n';
const fileName = lang;
const fileExtension = '.json';
let rootDirectory = '';
let rootDirectoryPath = '';
let directory = '';
let directoryPath = '';
if (this.platform.is('cordova')) {
this.platform.ready()
.then(() => {
rootDirectory = this.file.dataDirectory;
rootDirectoryPath = rootDirectory;
directory = rootDirectoryPath + subDirectory;
directoryPath = directory + '/';
console.log(directoryPath + fileName + fileExtension + ':');
const translationFilePath = this.webview.convertFileSrc(directoryPath + fileName + fileExtension);
// return this.http.get(translationFilePath);
return this.http.get(translationFilePath)
.pipe(map((res: JSON) => {
return res;
}));
});
} else {
rootDirectory = '/assets/data';
rootDirectoryPath = rootDirectory + '/';
directory = rootDirectoryPath + subDirectory;
directoryPath = directory + '/';
console.log(directoryPath + fileName + fileExtension + ':');
return this.http.get(directoryPath + fileName + fileExtension);
}
}
当我在浏览器中运行时(cordova 不可用),此功能起作用并从 /assets/data 返回翻译文件以便能够翻译。
但是,当科尔多瓦在应用程序中可用时,我收到一个错误:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'pipe' of undefined
TypeError: Cannot read property 'pipe' of undefined
at t.getTranslation (main.db14319ec6098ffa1c27.js:1)
at t.retrieveTranslations (main.db14319ec6098ffa1c27.js:1)
at t.use (main.db14319ec6098ffa1c27.js:1)
at main.db14319ec6098ffa1c27.js:1
at new t (polyfills.30cd1d148106f6301a8e.js:1)
at t.changeLanguage (main.db14319ec6098ffa1c27.js:1)
at n.selectLanguage (19.8a90e2507f2b3a13dd11.js:1)
at Object.handleEvent (19.8a90e2507f2b3a13dd11.js:1)
at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
at P (polyfills.30cd1d148106f6301a8e.js:1)
at new t (polyfills.30cd1d148106f6301a8e.js:1)
at t.changeLanguage (main.db14319ec6098ffa1c27.js:1)
at n.selectLanguage (19.8a90e2507f2b3a13dd11.js:1)
at Object.handleEvent (19.8a90e2507f2b3a13dd11.js:1)
at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
at na (main.db14319ec6098ffa1c27.js:1)
at main.db14319ec6098ffa1c27.js:1
at HTMLElement.<anonymous> (main.db14319ec6098ffa1c27.js:1)
我们将不胜感激任何建议和支持。
【问题讨论】:
标签: angular ionic-framework ionic4 ngx-translate