Angularjs 在多组件视图上使用 Observables 实现的服务

Question

目前我在 Angular 在将被各种组件使用的服务中实现 Observable 时遇到了麻烦。我有一个问题，基本上是我在组件 C 中有组件 A 和组件 B（Tab 样式）。组件 A 用于创建一个对象，比方说车轮，组件 B 用于创建一辆汽车，它使用下拉到 select 组件 A 的哪个车轮。我的问题是，当我创建一个车轮时，我必须刷新新创建的轮子的页面出现在组件 B 的下拉列表中，这就是我尝试实现 Observables 但到目前为止我还没有成功的原因。

服务：

constructor(private http: Http) {
    this._departamentos = <BehaviorSubject<Departamento[]>>new BehaviorSubject([]);
    this.departamentos = this._departamentos.asObservable();
  }

    private url: string = 'http://localhost:8080/';
  departamentos: Observable<Departamento[]>;
  private _departamentos: BehaviorSubject<any[]>;

    // <------------------------ GET ------------------------>
    getDepartments(): Observable<Departamento[]>{
        this.departamentos = this.http.get(this.url+'selectdepartamentos')
          .map(this.extractData)
          .catch(this.handleError);
    return this.departamentos;
  }

  private extractData(response: Response) {
      let body = response.json();
      return body || {};
  }

  private handleError(error: Response) {
      console.log(error);
      return Observable.throw(error.json().error || "500 internal server error");
  }

  // <------------------------ ADD ------------------------>
  addDepartment(newDepartment){
    return this.http.post(this.url + 'departamento', newDepartment).map(
      response => this._departamentos.next(Object.assign({}, newDepartment)) );
  }

    // <------------------------ UPDATE ------------------------>
    updateDepartment(nameOldDepartment, newDepartment){
        return this.http.put(this.url+'update/'+nameOldDepartment+'/departamento', newDepartment);
    }

    // <------------------------ DELETE ------------------------>
    deleteDepartment(nameOldDepartment){
        return this.http.delete(this.url+'delete/'+nameOldDepartment);
    }

正在订阅组件：

this.departamentoService.getDepartments()
  .subscribe( departments => this.arregloDepartamentos = departments,
              error => this.errorMessage = <any>error);

值得一提的是，当我刷新页面时，我最初可以从我的组件 B 获取值，但是即使我在我的 Add 方法（在服务中）上有可观察对象的 next 函数，当我添加时没有任何反应即使对象已插入到数据库中。

非常感谢任何帮助，提前致谢。

Answer 1

如果您希望添加的项目在添加后立即显示，您可以尝试

this.departamentoService.addDepartment(newDept).switchMap(()=>this.getDepartments())
 .subscribe( departments => this.arregloDepartamentos = departments,
          error => this.errorMessage = <any>error);

Answer 2

我是这样结束实施的：

服务：

private departmentsSubject = new BehaviorSubject([]);
private departments: Departamento[];

// <------------------------ GET ------------------------>
getDepartments(): Observable<Departamento[]>{
    return this.departmentsSubject.asObservable();
}
private extractData(response: Response) {
  let body = response.json();
  return body || {};
}
private handleError(error: Response) {
  console.log(error);
  return Observable.throw(error.json().error || "500 internal server error");
}
loadDepartments(){
   var sub = this.http.get(this.url+'selectdepartamentos')
      .map(this.extractData)
      .catch(this.handleError);
  sub.subscribe(
     data => this.departments = data,
     err => console.log(err),
     () => this.refresh()
  );
}
private refresh() {
   this.departmentsSubject.next(this.departments);
}

Component.ts:

this.departamentoService.getDepartments().subscribe(
  departments => this.arregloDepartamentosDelete = departments
);
this.departamentoService.loadDepartments();

Angularjs 在多组件视图上使用 Observables 实现的服务

Angularjs Services implemented with Observables on Multicomponent View

angular

rxjs

angular-services

behaviorsubject