2016-04-09 2 views
1

EDIT: Для чего это стоит, я узнал, что SharedService получает инициализацию дважды. Я подозреваю, что работаю с отдельными экземплярами, поэтому .subscribe() ограничивается только инициатором. Я не знаю, как это исправить ... Я думал, что все в одном углу в Angular2?Обмен наблюдаемым/субъектом в Angular2

У меня есть два компонента. Я хочу, чтобы любой компонент мог получать POST через службу, и оба компонента получили ответ.

Эти два компонента довольно простые и по сути идентичны для демонстрации этой проблемы. Ничего на самом деле большой, чтобы увидеть здесь, но здесь они только в случае, если:

Foo компонент

@Component({ 
    selector: "foo", 
    providers: [SharedService] 
}) 

export class FooComponent { 
    constructor(private _api:API, private _service:SharedService) { 
     this._service.data$.subscribe(
      response => console.log("FOO!", response) 
      // error not required here since the service handles it for all dependents. 
     ); 
    } 

    doSomething(values) { 
     this._service.post(values); 
    } 
} 

Бар Компонент

@Component({ 
    selector: "bar" 
}) 

export class BarComponent { 
    constructor(private _api:API, private _service:SharedService) { 
     this._service.data$.subscribe(
      response => console.log("BAR!", response) 
      // error not required here since the service handles it for all dependents. 
     ); 
    } 

    doSomething(values) { 
     this._service.post(values); 
    } 
} 

SharedService где я пытался сделать все правильно.

@Injectable() 
export class SharedService { 
    private _observer: Observer<Response>; 
    public data$; 

    // i wrapped Http in an API service. it does the following: 
    // 1. convenience methods like .map() for the observables 
    // 2. adding headers to every request so that i don't need to do that for every service 
    // 3. takes the first parameter e.g. "login" and converts it to a full endpoint 
    // 4. converts the "values" object in to a body string 

    constructor(private _api: API) { 
     this.data$ = new Observerable(observer = this._observer = observer).share(); 
    } 

    post(values:IValues) { 
     this._api.post("foobar", values).subscribe(
      response => this._observer.next(response), 
      error => console.log("foobar failure", error); 
     ); 
    } 
} 

Независимо от того, что я пытаюсь, я получаю только условие успеха вызывающего компонента. Поэтому, если я запускаю сервис из «Foo», я получаю «FOO!». и если я вызову его из «Бар», я получаю «БАР!».

В идеале я мог бы вызывать его из «Foo» и получать обратно «FOO!». и «БАР!». Порядок этих ответов не имеет большого значения.

ответ

2

Проблема в том, что у меня было это и не понимал его:

@Component({ 
    selector: "foo", 
    providers: [SharedService] // only existed on one of them 
}) 

@Component({ 
    selector: "bar" 
}) 

Который создал два экземпляра. Рабочий код:

@Component({ 
    selector: "foo" 
}) 

@Component({ 
    selector: "bar" 
})