如何将formio离线插件集成到angular项目中

Question

我已经成功地将formio API集成到了angular项目中，并且在angular8 UI中显示了我在formio中创建的表单。我还在同一页面上实现了语言翻译，它工作得很好。尝试集成formio离线插件，对如何在angular8版本中注册离线插件有什么建议？

引用：https://help.form.io/developer/offline/#offlineapi，但无法找到angular8脱机实现的详细信息

Answer 1

它的实现和工作都很好，下面是步骤：

注意:离线插件仅适用于formio enterprises版本

Step1: package.json -确保formio-offline-插件和依赖项

"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：

 Create offline service(offline.service.ts) and import the same in 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开发人员控制台(网络选项卡)，将连接更改为脱机。(假设互联网连接中断)请参阅下图。

​

1. 现在提交您在formio中创建并在angular应用程序中呈现的表单。预期行为:表单将成功提交，数据将通过formio离线插件存储在本地。
2. 应用程序联机后，存储的数据将通过已注册的formio api

推送到form.io