Angularjs Services implementiert mit Observables in der Mehrkomponentenansicht

Question

zur Zeit habe ich Probleme mit der Implementierung von Observablen in einem Dienst, der von verschiedenen Komponenten verwendet wird. Ich habe ein Problem, das grundsätzlich Komponente A und Komponente B in Komponente C (Tabstyle) hat. Komponente A ist zum Erstellen eines Objekts, sagen wir Räder und Komponente B ist zum Erstellen eines Autos, die ein Dropdown verwendet, um das Rad von Komponente A auszuwählen. Mein Problem ist, dass wenn ich ein Rad erstellen, muss ich die Seite für die neu aktualisieren Rad erstellt, um auf dem Dropdown von Komponente B zu erscheinen, weshalb ich versuche, Observables zu implementieren, aber bisher habe ich keinen Erfolg gehabt.

Service:

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

in den Komponenten Anmeldung:

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

erwähnenswert, dass ich zunächst die Werte aus meiner Komponente B erhalten kann, wenn ich die Seite aktualisieren, aber auch wenn ich auf meine Add-Methode (im Dienst) die Funktion neben der beobachtbaren, wenn ich nichts hinzufüge passiert, obwohl das Objekt in der DB eingefügt wird.

Jede Hilfe wird wirklich geschätzt, danke im Voraus.

Answer 1

Dies ist versuchen, wie ich es endete Umsetzung:

Service:

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

Answer 2

, wenn Sie das hinzugefügte Element möchten sich anzuzeigen, nachdem es hinzugefügt wird können Sie

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