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

Question

我有一些 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() { }
}

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

Answer 1

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

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

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

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

像这样使用您的服务：this.wsService.Method()

Answer 2

Joe，当您有服务时，想法是 "subscribe" 是 IN 组件。好吧，你可以转移到服务所有其他订阅

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

@Injectable({
  providedIn: 'root'
})
export class WsService {
  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8888');

  constructor() {
  }

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

并在组件中订阅 ws.myWebSocket（我喜欢在 ngOnInit 中订阅）

export class AppComponent implements OnInit {
  constructor(private ws:WsService ) {

  ngOnInit()
  {
     this.ws.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      err => console.log(err),
      () => console.log('complete')
   );
  }
  addMessage(msg)
  {
   this.ws.sendMessageToServer(msg)
  }
}

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

Angular 9 pass method from component to a service

typescript

angular

angular9