Обновление обратного вызова при использовании хранилища данных и поведения субъекта (Angular 7)

Question

Первый пост.Я совершенно новичок в Angular.Я немного искал об этом, но не нашел (?) Ответа.

Прежде чем подписаться напрямую на функции get / post / put, которые связались с API и вернули значение.При этом я мог обрабатывать обратный вызов непосредственно в графическом интерфейсе.

Этот подход был не лучшим, так как мне нужно было разделить данные между несколькими компонентами.

В итоге я создал хранилища данных.Проблема в том, что мне все еще нужен обратный вызов после выполнения, например: update ().

Как мне этого добиться?

Спасибо!

В обслуживании:

private _projects: BehaviorSubject<Project[]>; 
private serviceUrl = `${this.baseUrl}/api/project`;

private dataStore: { 
    projects: Project[]
};

get projects() {
    return this._projects.asObservable();
}

constructor(private http: HttpClient, public listener: ProjectListenerService, public authService: AuthService) {
    super();

    this.dataStore = { projects: [] };
    this._projects = <BehaviorSubject<Project[]>>new BehaviorSubject([]);
}

public loadAll() {
    return this.http.get<Project[]>(this.serviceUrl).pipe(
        catchError(this.handleError),
        map(res => res.map(v => new Project(v)))
    ).subscribe(data => {
        this.dataStore.projects = data;
        this._projects.next(Object.assign({}, this.dataStore).projects);
    }, error => console.log('Could not load projects.'));
}

public update(project: Project) {
    let payLoad = { Data: project, ConnectionId: this.listener.ClientConnectionId, HubAction: "AllExcept" };

    this.http.put(`${this.baseUrl}/${project.id}`, payLoad).subscribe(data => {
      if (typeof data == typeof true) {
        this.dataStore.projects.forEach((t, i) => {
          if (t.id === project.id) { this.dataStore.projects[i] = project; }
        });

        this._projects.next(Object.assign({}, this.dataStore).projects);
      } else console.log('Could not update project.');
    }, error => console.log('Could not update project.'));
}

В компоненте:

this.projectService.loadAll();

//Here i update a project, but i want to be able to do things after the update, like updating GUI. 
this.projectService.update(project);

//What i want to do... 
this.projectService.update(project).subscribe(data=>{
 //Do some gui stuff, do another update etc etc..
});

this.projectService.update(project).then()... etc

Answer 1

Я думаю, что самым простым способом было бы добавить еще один параметр к update, который будет обратным вызовом, который вы вызываете после this._projects.next.

. Более «Rx» решение будет использовать share() или * 1006.* и возвращает общий Observable.

public update(project: Project) {
  const shared = this.http.put(...).pipe(
    shareReplay(),
  );

  shared.subscribe(data => {
    ...
  });

  return shared;
}

Затем вы можете подписаться на возвращенный Observable и обновить GUI, как хотите.

this.projectService.update(project).subscribe(...);