从组件到服务的角度9传递方法

Posted 2021-03-28

我有一些websocket代码，可以在其中向Websocket服务器发送消息并得到答复。

此代码工作正常，但我想将其放入服务中，然后从组件中调用它。

这是现在位于组件内部的代码：

import { Component } from '@angular/core';
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8888');

  constructor() {

    this.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      err => console.log(err),
      () => console.log('complete')
   );

  }

  sendMessageToServer(msg) {
    const dte = Date.now();
    this.myWebSocket.next({message: `${msg} - ${dte}` });
  }

}

我现在已经创建了一项服务：

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

@Injectable({
  providedIn: 'root'
})
export class WsService {

  constructor() { }
}

我该怎么做...哪些部分从组件到服务...例如，我在服务内部还是在组件中订阅？

答案

您需要将服务引入组件。脚步：将您的服务导入组件。

import { WsService} from 'path/to/WsService';

引入本地字段private wsService: WsService;将您的服务添加到组件构造函数中：

constructor(wsService: WsService)
{
    this.wsService = wsService;
}

[使用您的服务，例如：this.wsService.Method()