Angular 2路由切换时音频播放器组件持续活跃实现问询

你的核心问题在于当前路由配置中，home、projects、prizes这三个路由各自独立实例化了PagesComponent——每次切换这些父路由时，Angular会销毁旧的PagesComponent实例，同时创建新的，导致播放器组件跟着被销毁。要解决这个问题，只需要重构路由结构，让PagesComponent成为所有子路由的唯一父容器，确保它只会被实例化一次。

具体修改步骤 #

1. 重构路由配置 #

把原来分散的路由合并到PagesComponent的子路由下，让PagesComponent作为顶级路由的父组件：

const routes: Routes = [
  {
    path: '', // 顶级空路由，作为PagesComponent的入口
    component: PagesComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
        path: 'projects',
        children: [
          {
            path: '',
            component: ProjectsComponent,
          },
          {
            path: ':id',
            component: DetailsViewComponent,
          },
        ],
      },
      {
        path: 'prizes',
        children: [
          {
            path: '',
            component: EditionsLinksComponent,
          },
          {
            path: 'edition/:year/:id',
            component: DetailsViewComponent,
          },
          {
            path: 'edition/:year',
            component: EditionsComponent,
          },
        ],
      },
      // 可选：添加默认路由重定向到home
      {
        path: '**',
        redirectTo: 'home'
      }
    ],
  },
];

2. 验证效果 #

修改后，无论你在home、projects还是prizes之间切换路由，PagesComponent都只会存在一个实例，它里面的app-player组件自然不会被销毁，播放状态也能持续保持。

额外优化建议 #

如果需要在播放器激活后，即使刷新页面也能恢复播放状态，可以创建一个播放器服务（比如PlayerService），用BehaviorSubject来保存当前播放的音频信息、进度、播放状态等。播放器组件订阅服务中的状态，这样即使组件重新初始化（比如刷新页面），也能从服务中恢复之前的状态。

示例服务核心代码：

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

@Injectable({ providedIn: 'root' })
export class PlayerService {
  private currentTrack$ = new BehaviorSubject<any>(null); // 替换成你的音频类型
  private isPlaying$ = new BehaviorSubject<boolean>(false);
  private progress$ = new BehaviorSubject<number>(0);

  // 对外暴露可观察对象，供组件订阅
  get currentTrack() {
    return this.currentTrack$.asObservable();
  }

  get isPlaying() {
    return this.isPlaying$.asObservable();
  }

  // 提供修改状态的方法
  setTrack(track: any) {
    this.currentTrack$.next(track);
  }

  togglePlay() {
    this.isPlaying$.next(!this.isPlaying$.value);
  }

  // 其他进度控制方法...
}

然后在app-player组件中注入这个服务，订阅状态并更新UI即可。

内容的提问来源于stack exchange，提问作者Santiago Sotelo Docío