Angular 9 метод передачи от компонента к службе - PullRequest
Новая
       10

Angular 9 метод передачи от компонента к службе

0 голосов
/ 27 мая 2020

У меня есть код веб-сокета, в котором я отправляю сообщение на сервер веб-сокета и получаю ответ.

Этот код работает нормально, но я хочу поместить его в службу, а затем просто вызвать его из компонента .

Вот код, который сейчас находится внутри компонента: 

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() { }
}

Как мне это сделать. ..какие части go из компонента в службу ... Например, я подписываюсь внутри службы или в компоненте?

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Джо, когда у вас есть услуга, идея заключается в том, что «подписка» была компонентом 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)
  }
}
0 голосов
/ 27 мая 2020

Вам необходимо добавить сервис в свой компонент. Шаги: Импортируйте вашу службу в компонент. 

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

Введите локальное поле private wsService: WsService; Добавьте свою службу в конструктор компонентов: 

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

Используйте свой сервис, например: this.wsService.Method()

...