从服务方法Angular获取更新的数据

时间:2018-08-10 15:06:57

标签: angular typescript rxjs

我有这项服务。

playerhandler.ts

import { Observable,of,Subject } from 'rxjs';
import { PlayerService } from "./../../core/services/player.service";
import { Injectable } from "@angular/core";
import { DeezerService } from "../services/deezer.service";
import { Track } from "../models/Track";

@Injectable({
  providedIn: "root"
})
export class PlayerHanlder {
  isPlaying: boolean = false;
  index: number;

  constructor(
    private playerService: PlayerService,
    private deezer: DeezerService
  ) { }

  initTracks(tracks): void {
    this.playerService.init(tracks);
  }

  play() {
    this.isPlaying = true;
    this.playerService.play();
  }

  pause() {
    this.playerService.pause();
  }

  stop() {
    this.playerService.stop();
  }

  next() {
    this.playerService.playNext();
  }

  previous() {
    this.playerService.playPrevious();
  }

  playing(playing) {
    this.isPlaying = playing;
  }

  onEnd() {
    this.playerService.playNext();
  }

  start(album) {
    if (this.isPlaying) this.stop();
    this.deezer.getTrackList(album.tracklist)
      .subscribe((tracks: Track[]) => {
        this.initTracks(tracks);
        this.playerService.index = 0;
        this.play();
      });
  }

  startSelectedTrack(tracks,trackIndex) {
    if (this.isPlaying) this.stop();

    this.initTracks(tracks);
    this.playerService.playNew(trackIndex);
    this.isPlaying = true;
  }
}

只要用户单击播放专辑或单击播放特定曲目,initTracks(tracks)方法就会获取新数据。这可以在后两种方法中看到。现在,我有一个queue component,应该获取传递到tracks方法中的initTracks(tracks)数据,以便当前的曲目播放列表将显示在{{1} }。这是我执行问题的地方。我试图在queue component方法中使用of(tracks)创建一个可观察的轨道。那没有解决。我也尝试过使用initTracks,以便可以同时订阅和订阅曲目,但也无法解决。请如何将发送到Subject方法中的所有新数据放入队列组件。谢谢。

如果需要,这是当前的源代码。 source code

1 个答案:

答案 0 :(得分:1)

请使用ReplaySubject并告知是否有帮助。 可以在发送数据和订阅的地方张贴一些示例代码吗?