Question

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

现在，对于每个用户操作，都会通过相关服务发出一个http请求，该请求会持续更改数据库。

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

您如何建议重构代码以支持该代码？制作一组用户操作，并在保存迭代数组并逐个进行相关操作时，编写一些http中间件来保存所有http调用，直到按下“save”为止？

Answer 1

你应该研究一下redux。这将允许MVP编程模型，并与Angular一起使用。 ng2-redux

Answer 2

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

这可以通过redux之类的库来解决（redux / rxjs-store rxjs-effects等）..

或者你可以使用普通的rxjs BehaviourSubject或Subject作为Observable。

这是一个使用普通rxjs observables和angular服务来实现状态管理的插件示例。 https://embed.plnkr.co/dEDJri4TziCS91oZiuHb/

TL; DR

这是服务

@Injectable()
export class AppStateService{

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

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

这是将调度保存事件的组件

@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...");

  }
}

这是您在每个感兴趣的组件中使用observable的方式

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

草稿状态/发布更改以角度2保存

2 个答案: