Angular2中的WebSocket服务，访问父组件答案

【问题标题】：WebSocket service in Angular2, accessing the parent componentAngular2中的WebSocket服务，访问父组件
【发布时间】：2017-06-07 22:06:23
【问题描述】：

我正在尝试实现自己在 angular2 中使用 WebSockets 的方式，但我正面临一个非常愚蠢的问题。

我定义了一个服务，它有一个方法可以返回一个 WebSocket 对象，方法是获取一个 url 和两个函数，一个用作“onmessage”，一个用作“onerror”（我已经硬编码了“onopen”和“onclose”，因为它们不会因组件而异）：

    @Injectable()
export class WsService {

    createWebSocket(url: string, onMessage: (e: Event) => any, onError: (e: Event) => any ): WebSocket {
        let ws = new WebSocket(url);
        ws.onopen = function(evt: Event) {
            console.log("Connected!");
        }
        ws.onclose = function(evt: Event) {
            console.log("Disconnected!");
        }
        ws.onmessage = onMessage;
        ws.onerror = onError;
        return ws;
    }
}

然后在我的 appComponent 中实例化一个 WebSocket 对象，如下所示：

ngOnInit(){
this.ws = this._ws.createWebSocket("ws://localhost:63562", this.on_msg, this.on_err);
}

on_msg(e: Event) {
      this.blah = e["data"];
  }

  on_err(e: Event) {
      console.log(e);
  }

现在的问题是，即使在 AppComponent 中定义了“on_msg”函数，它仍将自己视为 WebSocket 对象的一部分，因此它无法访问和操作 AppComponent 中定义的变量。

我该怎么办？

【问题讨论】：

标签： angular websocket angular2-services angular2-components

【解决方案1】：

使用一个已经制作好的库，比如这个： https://www.npmjs.com/package/angular2-websocket-service

它将利用您可以找到的错误，并且通常基于最佳实践...

[编辑] RxJS 也有类似的东西：

https://github.com/ReactiveX/rxjs/blob/master/src/observable/dom/WebSocketSubject.ts

【讨论】：