代码之家 › 专栏 › 技术社区 › Darío Villalta

Angularjs服务在多组件视图上使用可观察对象实现

behaviorsubject angular-services rxjs angular

Darío Villalta · 技术社区 · 8 年前

服务:

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方法(在服务中)上有observable上的下一个函数,当我添加时,即使对象插入到DB中,也不会发生任何事情。

非常感谢您的帮助,提前谢谢。

2 回复 | 直到 8 年前

Fan Cheung 8 年前

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

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

Darío Villalta 8 年前

我就是这样结束实施的:

服务:

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

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