Angular 角度2/4的离线和在线功能

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

当用户单击按钮A时，整个应用程序应进入脱机模式（即页面需要缓存&表单中的任何新条目都将存储在浏览器内存中）

当用户单击按钮B时，需要将存储的数据推送到数据库

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

DIY版本：

首先，你需要在你的服务中设置一个开关。如果处于本地模式，则在客户端缓存或存储所有数据。最好在数据中有一个标志，用于判断数据是否已同步到服务器。若它处于服务器模式，那个么做任何需要的事情来将所有数据推送到服务器端

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

这是总的想法

我的想法代码实现了这一点。创建父服务类：

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
        });
    }
}

---

这个太宽了。有许多因素需要互联网接入。例如Firebase DB SDK有相应的方法，该如何在服务中实现切换？我想用一个单独的服务文件来实现和处理我的脱机数据。您可以创建一个类，将交换机作为公共属性，并将其注入到所有服务中。由于注入将使用单例，因此属性值将在所有服务中共享。如果我有两个服务online.service.ts和offline.service.ts，并且都注入了switch类。我的应用程序状态为online和online.service.ts正在为我的组件提供服务，当用户单击offline时，应该从offline.service.ts为组件提供服务。你认为我如何在运行时切换。我不确定这是否是一个好方法。您的组件将需要标识要使用的服务。为什么不把它和组件隔离开来，让服务层发挥作用呢？组件真的不关心它是离线模式还是在线模式，它的工作只是操纵数据和视图（比如控制器）。我同意你的观点！只是我在想我如何在我的代码中实现它。服务中的某个init（）可以重定向到联机服务文件到脱机服务文件，如果（联机）我不想这样做。。其他的在同一个文件中。