在Angular2中共享一個observable /主題

編輯：爲什麼它的價值，我已經瞭解到SharedService正在初始化兩次。我懷疑我正在使用單獨的實例，這就是爲什麼.subscribe（）僅限於啓動器的原因。我不知道如何糾正這個......我以爲Angular2中的所有東西都是單身人士？在Angular2中共享一個observable /主題

我有兩個組件。我希望任何一個組件都能夠通過服務進行POST，並讓這兩個組件都能收到響應。

這兩個組件是非常基本的，並且對於這個問題的演示基本相同。真的沒什麼大在這裏看到，但在這裏，他們是以防萬一：

富組件

@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！」和「BAR！」。這些迴應的順序並不重要。

來源

2016-04-09 oooyaya

問題是，我有這個並沒有意識到這一點：

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

@Component({ 
    selector: "bar" 
})

這創造兩個實例。工作代碼只是：

@Component({ 
    selector: "foo" 
}) 

@Component({ 
    selector: "bar" 
})

來源

2016-04-09 20:21:33 oooyaya

在Angular2中共享一個observable /主題

回答

相關問題