时间戳

首页 > 解决方案 > 从事件监听器中保存价值

javascript - 从事件监听器中保存价值

问题描述

我在构建代码的方式上存在问题。

我正在制作一个访问 Spotify WebPlaybackSDK 以通过我的浏览器播放音乐的前端服务。使用它的方法是从我的前端连接到 sdk，然后从 Spotify 调用 API，告诉它使用访问令牌、设备 ID 和跟踪 uri 从设备播放歌曲。

我的问题是，我没有同步方法来保存 Spotify 播放器应该返回给我的设备 ID，因为它是通过事件侦听器完成的。下面是 ngOnInit() 方法下的一些代码。

(async() => {
        const { Player } = await this.playbackService.loadPlaybackPlayer();
        const sdk = new Player({
          name: "Web Playback SDK",
          volume: 1.0,
          getOAuthToken: callback => { callback(access_token); }
        });
        
        this.playbackService.connectPlayer(sdk);
        sdk.addListener('ready', ({device_id}) => {
          
        })
      })();

我的播放服务中有一个 playTrack() 函数，它需要 device_id，但我不知道如何从事件侦听器中保存它。我需要将它保存在我的应用程序中，以便我可以随时调用 playTrack() 方法。

标签： javascriptangularspotify

解决方案

您可以创建一个 Subject 实例并在触发 ready 事件时发出它。

订阅OnMusicReady并获取 device_id。

  device_id;
  OnMusicReady = new Subject();

  ngOnInit() {
    this.OnMusicReady.subscribe(device_id => {
      console.log('Device ID: ' + device_id);
      this.device_id = device_id;
      // Perform additional logic here.
    });
    this.initSpotify();
  }

  initSpotify() {
    (async () => {
      const { Player } = await this.playbackService.loadPlaybackPlayer();
      const sdk = new Player({
        name: 'Web Playback SDK',
        volume: 1.0,
        getOAuthToken: callback => {
          callback(access_token);
        }
      });

      this.playbackService.connectPlayer(sdk);
      sdk.addListener('ready', ({ device_id }) => {
        // Store device_id in the class variable.
        this.OnMusicReady.next(device_id);
      });
    })();
  }

推荐阅读