Angular 如何修复'；对象不可用'；有棱角的？

我有一个叫做EditorComponent的组件，它从角度服务调用函数

export class EditorComponent implements OnInit {

  constructor(private crudService: CrudService) { }

  ngOnInit() {
    this.crudService.readProject();
  }
}

readProject（）方法失败，原因是：

“试图使用不可用或不再可用的对象”

---

我不明白我做错了什么。谢谢

问题在于

WebSocket

未处于

打开状态

读取状态。如果在

readProject（）

函数中设置2秒钟的超时时间，并在2秒钟后调用

this.connection.send（…）

，则它将正常工作

最后，在调用

readProject（）

之前，您需要等待连接完全打开

我组织了一场闪电战来证明这一点

---

编辑（提供可能的解决方案） 一个可能的解决方案是在

CrudService

中使用一个可观察的属性来确定连接何时打开。在您要调用的组件中，

readProject（）

将订阅可观察的连接状态，并且当状态更改为打开时，只有在调用

readProject

积垢服务 websocket-state.enum.ts

---

问题在于

WebSocket

未处于

OPEN

readyState中。如果在

readProject（）

函数中设置2秒钟的超时时间，并在2秒钟后调用

this.connection.send（…）

，则它将正常工作

最后，在调用

readProject（）

之前，您需要等待连接完全打开

我组织了一场闪电战来证明这一点

---

编辑（提供可能的解决方案） 一个可能的解决方案是在

CrudService

中使用一个可观察的属性来确定连接何时打开。在您要调用的组件中，

readProject（）

将订阅可观察的连接状态，并且当状态更改为打开时，只有在调用

readProject

积垢服务 websocket-state.enum.ts

---

你能给我看一下CrudService的完整代码吗。所有要通过依赖项注入使用的angular服务都需要@Injector（）装饰，或者添加文件中的完整代码。看起来像

新的WebSocket（“ws://localhost:8888/kritiq”、“json”）

可能没有成功我考虑过这一点，但我在readProject（）的开头放了一个console.log（this.connection）函数，它确实记录了一个对象。你能展示一下CrudService的完整代码吗。所有要通过依赖项注入使用的angular服务都需要@Injector（）装饰，或者添加文件中的完整代码。看起来像

新的WebSocket（“ws://localhost:8888/kritiq”、“json”）

可能没有成功我考虑过这一点，但我在readProject（）的开头放了一个console.log（this.connection）函数，它确实记录了一个对象。非常感谢！它就像一个符咒。你的透彻解释真有帮助！非常感谢你！它就像一个符咒。你的透彻解释真有帮助！

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CrudService {
  connection: WebSocket;

  constructor() {
    this.connection = new WebSocket("ws://localhost:8888/kritiq", "json");
  }

  readProject(): void {
    try {
      this.connection.send("READ PROJECT");
    } catch (e) {
      console.log(e);
    }
  }
}

export class CrudService {

  public connection: WebSocket;
  
  private connectionStateSubject: BehaviorSubject<WebSocketState> = 
    new BehaviorSubject<WebSocketState>(WebSocketState.CLOSED);
  
  public connectionState: Observable<WebSocketState> = 
    this.connectionStateSubject.asObservable();

  constructor() {
    this.connection = new WebSocket('wss://echo.websocket.org');
    this.connection.onopen = (event) => this.onOpen(event);
    this.connection.onmessage = (event) => this.onMessage(event);
    this.connection.onclose = (event) => this.onClose(event);
  }

  readProject(): void {
    this.connection.send("READ_PROJECTS");
  }

  onMessage(event: any) {
    console.log(event);
  }

  onOpen(event: any) {
    this.connectionStateSubject.next(WebSocketState.OPEN);
  }

  onClose(event: any) {
    this.connectionStateSubject.next(WebSocketState.CLOSED);
  }

}

export class EditorComponent implements OnInit  {

  public states: string[] = [];
  
  constructor(private _crudService: CrudService) {}

  ngOnInit() {
    this._crudService.connectionState.subscribe((state: WebSocketState) => {
      if (state === WebSocketState.OPEN) {
        this._crudService.readProject();
      }
    });
  }

}

export enum WebSocketState {
  OPENING,
  OPEN,
  CLOSING,
  CLOSED
}