Angular 5中基于服务属性的条件类

Question

我有一个简单的 Angular 5 应用程序，它需要一个连续的音频播放器。它目前由一个列出音频文件的组件、一个包含音频播放器的组件和一个实际播放文件的音频播放器服务组成。

当用户单击其中一个曲目时，audioplayer 服务开始使用 wavesurfer.js 库播放此曲目，该库位于位于 audioplayer 组件内的 #waveform div 中。这由服务内的公共对象wavesurfer 处理。当曲目播放完毕时，此对象会发出一个事件。我在音频播放器模板中有一些 div（按钮和指示器），我想根据曲目是否完成播放来更改类。

我尝试在组件中添加以下代码：

this.audioPlayerService.wavesurfer.on('finish', function () {
   alert('works');
});

但这不起作用。我尝试遵循我在网上找到的其他一些示例，但我似乎无法理解如何在服务和组件之间进行通信。无论如何，我发现的大多数事情都在谈论 Angular 2，所以我不确定它是否不起作用是因为我做错了，还是因为它是不同的版本。如何查看音频播放器组件中的完成事件，或者如何查看公共变量播放的变化？

这是服务中的代码：

import {EventEmitter, Injectable} from '@angular/core';
import * as WaveSurfer from 'wavesurfer';

@Injectable()
export class AudioPlayerService {

  public wavesurfer: WaveSurfer;
  public playing = false;

  constructor() { }

  setTrack(track): void {
      const that = this;

      // create a new instance
      this.wavesurfer = WaveSurfer.create({
          container: '#waveform'
      });

      // fire the play function
      this.wavesurfer.on('ready', function () {
          that.play();
      });

      // load the waveform
      this.wavesurfer.load(track.preview_url);

      this.wavesurfer.on('finished', function () {
          this.playing = false;
      });
  }

  play() {
      this.wavesurfer.play();
      this.playing = true;
  }

}

Answer 1

你可以通过Rxjs/Subject实现你想要的。

@Injectable()
export class AudioPlayerService {

    public wavesurfer: WaveSurfer;
    _playing: Subject<boolean> = new Subject(false);
    playing$: Observable<boolean> = _playing.asObservable();

    constructor() { }

    setTrack(track): void {
        const that = this;

        // create a new instance
        this.wavesurfer = WaveSurfer.create({
            container: '#waveform'
        });

        // fire the play function
        this.wavesurfer.on('ready', function () {
            that.play();
        });

        // load the waveform
        this.wavesurfer.load(track.preview_url);

        this.wavesurfer.on('finished', function () {
            this.playing.next(false);
        });
    }

    play() {
        this.wavesurfer.play();
        this.playing.next(true);
   }
}

在组件文件中，订阅playing$

@Component({})
export class SomeComponent implements OnInit{
    constructor(private audioPlayerService : AudioPlayerService ) {}

    ngOnInit() {
        this.audioPlayerService.playing$.subscribe(next => {
             if (next === false) {
                 // playing is false
             } else {
                 // playing is true
             }
        })
    }
}

Answer 2

在阅读了您的问题后，我想出了一个想法，即您需要 component 来播放曲目，因此您可以毫无问题地在组件内使用 wavesurfer 的所有功能，这将很容易实现和理解。

但是，如果您坚持为此提供服务。我相信Sevice 应该是无国籍的；使用像playing 这样的公共变量不是一个好主意。另一方面，您的服务的使用者不应访问您声明的wavesurfer。

通常，您的服务可以引发通知服务内部发生的事情的事件。很容易实现。

import {EventEmitter, Injectable} from '@angular/core';
import * as WaveSurfer from 'wavesurfer';

@Injectable()
export class AudioPlayerService {

  private _wavesurfer: WaveSurfer;
  // public playing = false;
  public finished: EventEmitter<any> = new EventEmitter();
  public started: EventEmitter<any> = new EventEmitter();

  constructor() { }

  setTrack(track, container): void {
    const that = this;

    // create a new instance
    this.wavesurfer = WaveSurfer.create({
      container: container
    });

    // fire the play function
    this.wavesurfer.on('ready', function () {
      that.play();
      that.started.emit();
    });

    // load the waveform
    this.wavesurfer.load(track.preview_url);

    this.wavesurfer.on('finished', function () {
      that.finished.emit();
    });
  }

  play() {
    this.wavesurfer.play();
    //this.playing = true;
    this.started.emit();
  }

我不得不提一下，为服务中的每个重要操作声明一个特定的事件，这使得它易于理解和使用。