【问题标题】:How can I load translation files from the data directory once they have been stored there?翻译文件存储在数据目录后,如何从数据目录加载?
【发布时间】: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


    【解决方案1】:

    您应该尝试不同的方法。不要从文件中加载它,而是从类中加载它。

    使用库: https://www.npmjs.com/package/@ngx-translate/core

    编辑: 好的,我猜你的错误发生是因为 ionic 改变了相对路径和你为图像设置 src="" 的方式等。

    我会先尝试从同一个目录加载图像,看看它是否有效。尝试阅读有关在 ionic 应用程序中服务的资产

    【讨论】:

    • 我不确定您是否完全理解这一点。我正在使用 ngx-translate/core。我只是想实现一个自定义加载器。类似于here,但从数据目录读取。
    • 我明白了,让我问一个基本问题,您是否尝试使用 Angular 加载文件?因为这是不可能的。 Angular 在浏览器上运行,而不是在系统级别上运行,因此它无法加载文件 Nodejs 可以通过 fs 完成你可以做的是创建一个 Web 服务来返回这些文件数据。
    • 我很高兴更改加载文件的方式(如果给出了如何实现此目的的示例),但我不确定这是否是这里的问题。我相当确定它可以正常读取文件,但它可能没有以 ngx-translate 可以理解的方式返回 Observable
    • 最后我写了自己的翻译服务。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-18
    相关资源
    最近更新 更多