在Angular 2中实现输入值自动保存的最佳方法答案

【问题标题】：Best way to implement Auto save of the input value in Angular 2在Angular 2中实现输入值自动保存的最佳方法
【发布时间】：2018-02-13 02:47:32
【问题描述】：

在我的 Angular 2 应用程序中，我需要根据 UI 屏幕上输入标记值的任何更改来更新数据库。

我需要以如下方式更新此更改： 1. 对于应用程序最终用户，输入值似乎已自动保存。 2. 我的应用程序页面具有刷新功能，它使用 API 命中每 30 秒自动刷新一次页面。

实现自动保存功能的正确方法是什么，这样它才不会与应用程序的刷新功能发生冲突，即 用户在第 29 秒进行更改，如果页面在第 30 秒刷新，我们需要保留用户输入的数据？

据我了解，在输入标签中的每次击键时调用数据库是一个非常昂贵的过程。

请提出一些有用且有效的方法。

【问题讨论】：

您可以保存在onblurevent 中作为输入字段还是作为页面刷新调用的一部分？
调用数据库并不总是有效，一些输入字段使用表单控件。请说明您的具体问题，添加您编写的代码和错误（如果有）。
@NathanFoss 我目前正在使用模糊事件来保存数据，但是当用户输入数据时页面中间刷新时如何处理这种情况。
这些是唯一可能的方法，还是有其他解决方法。

标签： angular autosave

【解决方案1】：

您可以将更改发布到 BehaviourSubject 并延迟每次发送，这样您的客户就不会提出太多请求。

Form.html

<input (change)="captureChange($event.target.value)"/>

逻辑.ts

public $changeValues : Subject = new BehaviourSubject();

captureChange(val){
  this.changeValues.next(val)
}

ngOnInit(){
  $changeValues
    .debounceTime(/** some time you wish to delay by*/)
    .subscribe(val => autosave(val))
}
autosave(){
  /**

  Make HTTP Request


  **/
}

【讨论】：