Angular 2/4 中的离线和在线功能

Offline and Online Functionality in Angular 2/4

我必须通过单击按钮实现离线和在线功能。

  1. 当用户点击按钮 A 时,整个应用程序应进入离线模式(即页面需要缓存并且表单中的任何新条目都将存储在浏览器的内存中)
  2. 当用户点击按钮B时,需要将存储的数据推送到数据库。

请帮助我如何实现此功能。

DIY 版本:

首先,您需要在服务中设置一个开关。如果是本地模式,则缓存或存储所有数据在客户端。最好在数据中有一个标志,用于判断数据是否已同步到服务器。如果是server模式,就把所有数据push到server端。

其次,您将需要后台监控服务,或者当启用服务器模式时,同步操作将被启动一次。动作或后台进程将检查任何未同步的数据并将它们推送到服务器。完成后,将其标记为已同步。

这是大意。

实现这个想法的代码。创建父服务 class:

class BaseService {
    protected execute(online: any, offline: any){
        if (this.config.mode == 'online')
            online();
        else
            offline();
    }
}

在实际的儿童服务中

... extends BaseService {
    saveEmployee() {
        this.execute(() => {
            // do online stuff
        }, () => {
            // do offline stuff
        });
    }
}