Javascript 草稿状态/在保存到angular 2中时发布更改

我在应用程序中使用angular 4，目前用户可以对多个组件进行更改（拖放、删除项目、添加项目等）

现在，对于每个用户操作，都有一个http请求，通过相关服务将更改持久化到数据库中

要求用户能够进行此更改，并且只有在完成更改并按save后才能保存这些更改。（可以是10-50个不同类型的动作。）

---

为了支持这一点，您建议如何重构代码？要创建一个用户操作数组，并在保存时遍历该数组并逐个执行相关操作，请编写一些http中间件来保存所有http调用，直到按下“保存”为止

您应该查看redux。这将允许使用MVP编程模型，并且可以很好地使用Angular

就为了让你知道你面临的问题有个名字。 “应用程序状态管理”

这可以通过类似redux的库（redux/rxjs存储rxjs效果等）来解决

或者您可以使用普通的rxjs

behavior Subject

或

Subject

作为

可观察的

下面是一个plunker示例，它使用普通的rxjs可观察对象和角度服务来实现状态管理。

TL；博士

这是服务

@Injectable()
export class AppStateService{

  private _dataSaved = new Subject<string>();
  public dataSaved$ = this._dataSaved.asObservable()
  constructor() {}

  dispatchSaveEvent(data: String){
    this._dataSaved.next(data);
  }
}

@Injectable（）
导出类AppStateService{
private _dataSaved=新主题（）；
public dataSaved$=此。\u dataSaved.asObservable（）
构造函数（）{}
dispatchSaveEvent（数据：字符串）{
此._dataSaved.next（数据）；
}
}

这是将分派保存事件的组件

@Component({
  selector: 'my-footer',
  template: `
    <button (click)="saveData($event)">Save</button>
  `
})
export class Footer implements OnInit {
  constructor(private appState: AppStateService) {}

  ngOnInit() {}

  saveData(e){
    this.appState.dispatchSaveEvent("Some data to save here...");

  }
}

@组件({
选择器：“我的页脚”，
模板：`
拯救
`
})
导出类页脚实现OnInit{
构造函数（私有appState:AppStateService）{}
ngOnInit（）{}
保存数据（e）{
this.appState.dispatchSaveEvent（“要在此处保存的某些数据…”）；
}
}

这是您在每个感兴趣的组件中使用可观察到的数据的方式，即已保存的数据已发生

@Component({
  selector: 'my-comp-1',
  template: `
    <h1>Component-1! {{savedDataRecived}}</h1>
  `
})
export class Comp1 implements OnInit {
   savedDataRecived = "";

  constructor(private appState: AppStateService) {}

  ngOnInit() {
    this.appState.dataSaved$.subscribe(data=> this.handleSaveEvent(data))
  }

  handleSaveEvent(data: string){
    this.savedDataRecived = data;
  }
}

@组件({
选择器：“my-comp-1”，
模板：`
组件-1！{saveddatarecieve}
`
})
导出类Comp1实现OnInit{
savedDataRecived=“”；
构造函数（私有appState:AppStateService）{}
恩戈尼尼特（）{
this.appState.dataSaved$.subscribe（数据=>this.handleSaveEvent（数据））
}
handleSaveEvent（数据：字符串）{
this.savedDataRecived=数据；
}
}

@Vega我确实以反应式的方式管理我的单独表格。但是我看不出这与多个不相关的更新有什么关系。在用户点击save之前，db是否需要知道所有50件事情作为单独的操作？或者只保存状态的最后一个快照，然后让db记录下来，这样可以吗？例如，假设我们有一个项目数组，用户将继续删除、重新排序和重命名这些项目。你可以只跟踪最终的物品数组结果，而不是跟踪每个动作。我刚刚为你添加了一个usfull plunker示例。。