在 Angular2 中共享一个 observable/subject
Sharing an observable/subject in Angular2
编辑:就其价值而言,我了解到 SharedService 被初始化了两次。我怀疑我正在处理单独的实例,这就是 .subscribe() 仅限于发起者的原因。我不知道如何纠正这个...我以为 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!",如果我从 "Bar" 调用它,我会得到 "BAR!".
理想情况下,我可以从 "Foo" 调用它并接收回 "FOO!" 和 "BAR!"。这些响应的顺序并不重要。
问题是我有这个但没有意识到:
@Component({
selector: "foo",
providers: [SharedService] // only existed on one of them
})
@Component({
selector: "bar"
})
其中创建了两个实例。工作代码只是:
@Component({
selector: "foo"
})
@Component({
selector: "bar"
})
编辑:就其价值而言,我了解到 SharedService 被初始化了两次。我怀疑我正在处理单独的实例,这就是 .subscribe() 仅限于发起者的原因。我不知道如何纠正这个...我以为 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!",如果我从 "Bar" 调用它,我会得到 "BAR!".
理想情况下,我可以从 "Foo" 调用它并接收回 "FOO!" 和 "BAR!"。这些响应的顺序并不重要。
问题是我有这个但没有意识到:
@Component({
selector: "foo",
providers: [SharedService] // only existed on one of them
})
@Component({
selector: "bar"
})
其中创建了两个实例。工作代码只是:
@Component({
selector: "foo"
})
@Component({
selector: "bar"
})