如何在Angular 5中基于服务属性实现条件类？（附音频播放器场景）

我来帮你搞定这个连续音频播放器的条件类实现，结合你现有的Angular 5架构和wavesurfer.js的使用，核心思路是把服务里的播放状态做成响应式，然后在组件里通过NgClass根据状态动态添加样式类。下面一步步来：

第一步：改造音频服务，暴露响应式状态 #

首先得在你的audioplayer服务里，把当前播放的音轨、播放状态这些信息变成组件能实时订阅的响应式属性。我们用RxJS的BehaviorSubject来实现，它能保存当前状态，并且给新订阅者推送最新值。

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

// 先定义你的音轨类型（替换成你实际的结构）
interface Track {
  id: number;
  name: string;
  url: string;
}

@Injectable({ providedIn: 'root' })
export class AudioplayerService {
  // 存储当前播放音轨的Subject，初始值为null
  private currentTrack$ = new BehaviorSubject<Track | null>(null);
  // 暴露给组件订阅的Observable
  public currentTrackObservable = this.currentTrack$.asObservable();

  // 存储播放状态的Subject，初始值为false
  private isPlaying$ = new BehaviorSubject<boolean>(false);
  public isPlayingObservable = this.isPlaying$.asObservable();

  public wavesurfer: any; // 你的wavesurfer实例

  constructor() {
    // 监听wavesurfer的播放事件，同步更新状态
    if (this.wavesurfer) {
      this.wavesurfer.on('play', () => this.isPlaying$.next(true));
      this.wavesurfer.on('pause', () => this.isPlaying$.next(false));
      this.wavesurfer.on('finish', () => {
        this.isPlaying$.next(false);
        this.currentTrack$.next(null); // 播放结束后清空当前音轨
      });
    }
  }

  // 播放音轨的方法，更新当前音轨状态
  playTrack(track: Track) {
    this.wavesurfer.load(track.url);
    this.wavesurfer.play();
    this.currentTrack$.next(track); // 推送当前音轨到订阅者
  }
}

第二步：在音轨列表组件中实现条件类 #

现在在你的音轨列表组件里，注入这个服务，订阅状态变化，然后用[ngClass]给每个音轨项动态添加样式类（比如“正在播放”“已选中”的样式）。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AudioplayerService } from '../audioplayer.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-track-list',
  template: `
    <div 
      *ngFor="let track of trackList"
      [ngClass]="{
        'active-track': track.id === currentTrack?.id,
        'playing': track.id === currentTrack?.id && isPlaying
      }"
      (click)="audioPlayer.playTrack(track)"
      class="track-item"
    >
      {{ track.name }}
    </div>
  `,
  styles: [`
    .track-item {
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      margin-bottom: 4px;
    }
    .active-track {
      background-color: #f0f0f0;
      font-weight: 600;
    }
    .playing {
      color: #2563eb;
      /* 可以加个简单的动画效果 */
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
  `]
})
export class TrackListComponent implements OnInit, OnDestroy {
  trackList = [
    { id: 1, name: '夏日序曲', url: 'assets/audio/summer.mp3' },
    { id: 2, name: '雨夜独白', url: 'assets/audio/rain.mp3' }
    // 你的其他音轨数据
  ];

  currentTrack: any;
  isPlaying = false;
  private subs = new Subscription();

  constructor(public audioPlayer: AudioplayerService) {}

  ngOnInit() {
    // 订阅当前音轨变化
    this.subs.add(
      this.audioPlayer.currentTrackObservable.subscribe(track => {
        this.currentTrack = track;
      })
    );

    // 订阅播放状态变化
    this.subs.add(
      this.audioPlayer.isPlayingObservable.subscribe(status => {
        this.isPlaying = status;
      })
    );
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    this.subs.unsubscribe();
  }
}

第三步：在播放器组件中复用状态（可选） #

如果你的音频播放器组件也需要根据状态加类（比如播放按钮的样式切换），同样的逻辑就行：

<div #waveform class="waveform-container"></div>
<button 
  (click)="togglePlay()"
  [ngClass]="{ 'playing-btn': isPlaying }"
>
  {{ isPlaying ? '暂停' : '播放' }}
</button>

组件类里订阅状态：

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { AudioplayerService } from '../audioplayer.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-audio-player',
  templateUrl: './audio-player.component.html',
  styleUrls: ['./audio-player.component.css']
})
export class AudioPlayerComponent implements OnInit, OnDestroy {
  @ViewChild('waveform') waveformRef: ElementRef;
  isPlaying = false;
  private subs = new Subscription();

  constructor(private audioPlayer: AudioplayerService) {}

  ngOnInit() {
    // 初始化wavesurfer（如果之前没在服务里初始化的话）
    this.audioPlayer.wavesurfer = WaveSurfer.create({
      container: this.waveformRef.nativeElement,
      barWidth: 2,
      barGap: 1,
      cursorWidth: 1
    });

    // 订阅播放状态
    this.subs.add(
      this.audioPlayer.isPlayingObservable.subscribe(status => {
        this.isPlaying = status;
      })
    );
  }

  togglePlay() {
    this.audioPlayer.wavesurfer.playPause();
  }

  ngOnDestroy() {
    this.subs.unsubscribe();
  }
}

关键要点说明 #

• 响应式状态：用BehaviorSubject是因为它能保存当前值，组件初始化时就能拿到最新的播放状态，不会出现状态不同步的问题。
• 事件监听：在服务里监听wavesurfer的play/pause/finish事件，把原生播放器的状态同步到服务的响应式属性里。
• 内存泄漏防范：组件销毁时一定要取消订阅，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者Rob Teeuwen