Question

编辑：为了它的价值，我已经了解到SharedService已经初始化了两次。我怀疑我正在使用单独的实例，这就是.subscribe（）仅限于启动器的原因。我不知道如何纠正这个...我认为Angular2中的一切都是单身？

我有两个组成部分。我希望其中一个组件能够通过服务进行POST，并让两个组件都收到响应。

这两个组件非常基本，并且对于此问题的演示基本相同。没有什么比这里看到的更重要但在这里它们只是以防万一：

Foo Component

@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！”。这些回复的顺序并不重要。

Answer 1

问题是我有这个并且没有意识到：

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

@Component({
    selector: "bar"
})

创建了两个实例。工作代码只是：

@Component({
    selector: "foo"
})

@Component({
    selector: "bar"
})

在Angular2中共享一个observable / subject

1 个答案: