1

我已经成功地将 formio API 集成到 angular 项目中，并且我在 fromio 中创建的表单显示在 angular8 UI 中。我还在同一页面上实现了语言翻译，它工作正常。试图集成formio离线插件关于如何在angular8版本中注册离线插件的任何指针。？

参考：https : //help.form.io/developer/offline/#offlineapi 但无法找到 angular8 离线实现的详细信息

4

1 回答 1

2

它的实施和工作正常，以下是步骤：

注意：离线插件仅适用于formio企业版

Step1: package.json - 确保 formio-offline-plugin 和依赖

"formio-plugin-offline": "formio/formio-plugin-offline",
"formiojs": "^4.9.0-beta.4",
"angular-formio": "^4.5.3",
"@angular/-packages-": "8.2.14" or higher versions

Step2：
创建离线服务（offline.service.ts）并在app-module中导入

Step3：在服务文件中添加以下代码 

import { Injectable, EventEmitter } from '@angular/core';
import { Formio } from 'angular-formio';
import { AppConfig } from '../../../config/app.config';

const FormioOfflineProject = require('formio-plugin-offline/index').default;

@Injectable({
  providedIn: 'root'
})

export class OfflineService {
  public onlineChange: EventEmitter<any> = new EventEmitter();
  public offlinePlugin;
  public offlineCount = 0;
  public offlineOps: any = {};
  public offlineSubmissions = [];
  constructor() {
    this.onOfflineServiceInit();
  }

  /**
 * This Function is used to load all the on inti functions
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public onOfflineServiceInit() {
    this.registerOfflinePlugin();
    this.registerEventsForOffline();
    this.checkOfflineStatus();
    this.updateOfflineCount();
  }

  /**
 * This Function is used to Register Formio Offline Plugin
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public registerOfflinePlugin() {
      this.offlinePlugin = new FormioOfflineProject(AppConfig.appUrl);
      Formio.registerPlugin(this.offlinePlugin, `offline-plugin`);
  }

    /**
 * This Function is used to Register Formio event lisentenr
 * @memberOf Formio Offline Line service (OfflineService)
 */
 public registerEventsForOffline() {
   Formio.events.on('offline.saveQueue', () => this.updateOfflineCount());
   Formio.events.on('offline.queue', () => this.updateOfflineCount());
  }




  /**
 * This Function is used to check Formio Offline Plugin
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public checkOfflineStatus() {
      this.offlinePlugin.ready.then(() => {
          console.log('Plugin is ready');
        });
  }

  /**
   * This Function is used to check Formio Offline Plugin
   * @memberOf Formio Offline Line service (OfflineService)
   */
  public updateOfflineCount() {
      this.offlinePlugin.ready.then(() => {
        // If we are offline, then check the submission queue length.
        this.offlineCount = this.offlinePlugin.submissionQueueLength();
        this.offlineOps = {};
        if (this.offlineCount > 0) {
          this.offlineSubmissions = this.offlinePlugin.submissionQueue.map((queued) => {
            this.offlineOps[queued.request._id] = queued.request.method;
            return queued.request;
          });
        } else {
          this.offlineSubmissions = [];
        }
      });
      console.log("COUNT-------------"+this.offlineCount);
      console.log(this.offlineSubmissions);
    }
}

第4步：

  1. 模拟离线连接：打开 chrome 开发者控制台（网络选项卡）并将连接更改为离线。（假设互联网连接丢失）请参阅下图。 在此处输入图像描述
  2. 现在提交您在 formio 中创建并在 Angular 应用程序中呈现的表单。预期行为：formio 离线插件将成功提交表单，并将数据存储在本地。
  3. 一旦应用程序上线，存储的数据将通过注册的 formio api 推送到 form.io
于 2020-02-24T11:04:38.260 回答