Question

我写了一个角度服务，它连接socket.io到我的后端。我正确地使用_getStripes()方法获取服务器数据，并使用from()将它们转换为Observable，并使用最近创建的observable设置类变量_LEDs。

公共方法getStripes()在另一个组件中被调用和订阅，并且每次undefined都会返回。

led.service.ts：

import {Injectable} from '@angular/core';
import * as io from 'socket.io-client';
import {LED} from './led';
import {Observable} from 'rxjs/Observable';
import {from} from 'rxjs/observable/from';

@Injectable()
export class LedService {
  private _io;
  private _LEDs: Observable<LED>;

  constructor() {
    this._io = io('http://localhost:80');
    // Subscribe getStripes Event
    this._io.on('getStripes', this._getStripes);

    // Initial Request Stripes from Server
    this._io.emit('getStripes');
  }

  /**
   * Server Response
   * @param {LED[]} data
   * @private
   */
  private _getStripes(data: LED[]) {
    console.log('Got Stripes: ', data); // works
    this._LEDs = from(data);
  }

  /**
   * Get the current connected LEDStripes
   * @returns {Observable<LED>}
   */
  public getStripes(): Observable<LED> {
    // request latest Stripes
    this._io.emit('getStripes');
    return this._LEDs; // always undefined
  }

  public setStripeColor(name: string, color: string) {
    this._io.emit('setStripeColor', name, color);
  }

}

Answer 1

您需要将订阅与emit分开。

订阅设置管道以接收传入数据，但是发送数据。它看起来像它的请求/响应样式，因为事件和发射参数是相同的字符串，但无论如何在两者之间存在时间延迟，因此需要先建立管道。

尝试使用主题作为this._LEDS。

在服务中

import {Injectable} from '@angular/core';
...
import {Subject} from 'rxjs/Subject';

@Injectable()
export class LedService {
  private _io;
  private _LEDs = new Subject<LED>();
  public LEDs = this._LEDs.asObservable();  // Subscribe to this

  constructor() {
    ...
    // Subscribe getStripes Event
    this._io.on('getStripes', this._getStripes.bind(this) );
    ...
  }

  /**
   * Server Response
   * @param {LED[]} data
   * @private
   */
  private _getStripes(data: LED[]) {
    data.forEach(led => this._LEDs.next(led));
    // OR send the whole array as a single emit if it suits your application better
    //    this._LEDs.next(data);
    // in which case the declaration above would be
    //    private _LEDs = new Subject<LED[]>();
  }

  /**
   * Get the current connected LEDStripes
   * @returns void
   */
  public getStripes(): void {
    // request latest Stripes
    this._io.emit('getStripes');
  }

在组件中

ngOnInit() {
  // subscribe to the LEDs
  this.sub = this.ledService.LEDS.subscribe(leds => {
    // do something with data
  }) 
  // or use the subscription directly in the template
  // with <div> {{ (ledService.LEDS | async) }} </div>
}

getFresh() {
  this.ledService.getStripes();
}

Angular 4 Service方法总是返回undefined而不是Observable

1 个答案: