如何检测Angular组件是否活跃？解决音频播放冲突问题

看起来你遇到的核心问题有两个：一是组件销毁后订阅未清理导致的内存泄漏（已销毁组件仍执行播放），二是当前未激活的组件也响应了播放事件。下面给你几个实用的解决方案：

方案1：清理组件订阅（最基础且关键） #

你的组件在ngOnInit中订阅了ViewUpdateService.notifier，但没有在组件销毁时取消订阅。这会导致组件实例被销毁后，订阅仍然存在，后台的interval依然会触发soundHandler，进而播放音频。

解决方法很简单，用Subscription管理订阅，在ngOnDestroy中取消：

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

@Component() 
export class ListComponent implements OnInit, OnDestroy { 
  private notifierSub: Subscription;

  private soundHandler(): void { 
    if(!this.triggerEventOccurred) return; 
    if(this.shouldPlaySoundIfVisible) this.kerching.play(); 
  } 

  constructor(private viewUpdateService: ViewUpdateService) {} 

  ngOnInit(): void { 
    this.dataService.getList().subscribe(l => this.handle(l)); 
    // 保存订阅引用
    this.notifierSub = this.viewUpdateService.notifier.subscribe(t => this.soundHandler()); 
  } 

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.notifierSub.unsubscribe();
  }
}

DetailComponent完全照搬这个逻辑即可。因为你的路由配置中，ListComponent和DetailComponent是同级子路由，路由切换时前一个组件会被销毁，取消订阅后就不会再执行播放逻辑了。

方案2：判断组件是否处于当前激活路由（针对组件未销毁场景） #

如果你的组件是在同一路由下的动态视图（比如用*ngIf切换、Tab页等，不会被路由销毁），那需要在播放前主动判断组件是否处于当前激活路由。

注入ActivatedRoute和Router，在soundHandler中验证当前路由是否匹配：

import { ActivatedRoute, Router } from '@angular/router';

@Component() 
export class ListComponent implements OnInit { 
  constructor(
    private viewUpdateService: ViewUpdateService,
    private route: ActivatedRoute,
    private router: Router
  ) {} 

  private soundHandler(): void { 
    if(!this.triggerEventOccurred) return; 

    // 检查当前路由是否是当前组件对应的路由（精确匹配）
    const isActive = this.router.isActive(this.route.snapshot.url.join('/'), true);
    if(isActive && this.shouldPlaySoundIfVisible) {
      this.kerching.play();
    }
  } 
}

方案3：在服务层控制事件分发（更优雅的全局管理） #

如果想从根源上避免非活跃组件收到事件，可以在ViewUpdateService中维护当前激活的组件标识，只向活跃组件分发事件：

修改ViewUpdateService： #

import { Subject, Observable, interval, empty, tap, filter } from 'rxjs';
import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable() 
export class ViewUpdateService { 
  private activeComponentId: string | null = null;
  private internalNotifier = new Subject<void>();
  public notifier: Observable<void>;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { 
    // 用interval触发内部Subject
    this.notifier = isPlatformBrowser(this.platformId) 
      ? interval(250).pipe(tap(() => this.internalNotifier.next()))
      : empty(); 
  } 

  // 组件激活时调用
  markAsActive(componentId: string): void {
    this.activeComponentId = componentId;
  }

  // 组件销毁时调用
  markAsInactive(componentId: string): void {
    if(this.activeComponentId === componentId) {
      this.activeComponentId = null;
    }
  }

  // 获取仅当前激活组件能收到的事件流
  getActiveComponentNotifier(componentId: string): Observable<void> {
    return this.internalNotifier.asObservable().pipe(
      filter(() => this.activeComponentId === componentId)
    );
  }
}

组件中使用： #

@Component() 
export class ListComponent implements OnInit, OnDestroy { 
  private readonly COMPONENT_ID = 'list-component';

  constructor(private viewUpdateService: ViewUpdateService) {} 

  ngOnInit(): void { 
    this.viewUpdateService.markAsActive(this.COMPONENT_ID);
    // 只订阅当前组件激活时的事件
    this.viewUpdateService.getActiveComponentNotifier(this.COMPONENT_ID)
      .subscribe(() => this.soundHandler());
  } 

  ngOnDestroy(): void {
    this.viewUpdateService.markAsInactive(this.COMPONENT_ID);
  }
}

额外优化：避免音频叠加播放 #

为了彻底解决声音失真，还可以在播放前检查音频是否正在播放，防止重复触发：

private soundHandler(): void { 
  if(!this.triggerEventOccurred) return; 
  if(this.shouldPlaySoundIfVisible && !this.kerching.paused) {
    // 如果音频正在播放，先暂停再重新播放（或者直接跳过）
    this.kerching.pause();
    this.kerching.currentTime = 0;
  }
  if(this.shouldPlaySoundIfVisible) {
    this.kerching.play();
  }
}

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