Angular 2 - Audio player component gets destroyed when navigating between routes

Question

I am developing a website for music groups. One of its components is an audio player. In case the user activates the audio player, I need it active regardless if the user changes path.

The player is located in the parent component (pages.component) from which the rest of the views hang:

<div id="main-wrapper">
  <app-header></app-header>
  <div class="page-wrapper">
    <main>
      <router-outlet></router-outlet>
      <section id="player">
        <app-player></app-player>
      </section>
      <section id="mav-section">
        <app-icons-skirt *ngIf="_displaySkirtIcons"></app-icons-skirt>
        <app-banner-mav></app-banner-mav>
      </section>
    </main>
  </div>
  <app-footer></app-footer>
</div>

The pages.routing file looks like this:

const routes: Routes = [
  {
    path: 'home', //A
    component: PagesComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },
    ],
  },
  {
    path: 'projects',  //B
    component: PagesComponent,
    children: [
      {
        path: '',
        component: ProjectsComponent,
      },
      {
        path: ':id',
        component: DetailsViewComponent,
      },
    ],
  },
  {
    path: 'prizes', //C
    component: PagesComponent,
    children: [
      {
        path: '',
        component: EditionsLinksComponent,
      },
      {
        path: 'edition/:year/:id',
        component: DetailsViewComponent,
      },
      {
        path: 'edition/:year',
        component: EditionsComponent,
      },
    ],
  },
];

The player can be activated from any of the views included in routes B and C.

If, for example, the player is activated in B (projects), it remains active even if we navigate from ProjectsComponent to DetailsViewComponent or vice versa. But if we navigate from B to C or A, it is destroyed.

Likewise if we activate it in C, we can navigate between EditionsLinksComponent, DetailsViewComponent and EditionsComponent without problem.

My question is, how can I make the player remain active regardless of the route chosen by the user?

Thank you very much for your time.

score 1 · Answer 1 · answered Mar 17 '23 at 14:27

In your routes file, for each route A\B\C, a PagesComponent is defined, despite the same PagesComponent, it will be destructed and reinitialized each time when navigating from A to B, from B to C... and etc.

To prevent this behavior, you need to define a route with PagesComponent and use A,B,C as children of this route.

Example:

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    children: [
      {
        path: 'home', // A
        component: HomeComponent,
      },
      {
        path: 'projects',  //B
        children: [
          {
            path: '',
            component: ProjectsComponent,
          },
          {
            path: ':id',
            component: DetailsViewComponent,
          },
        ],
      },
      {
        path: 'prizes', //C
        children: [
          {
            path: '',
            component: EditionsLinksComponent,
          },
          {
            path: 'edition/:year/:id',
            component: DetailsViewComponent,
          },
          {
            path: 'edition/:year',
            component: EditionsComponent,
          }
        ]
      }
    ]
  }
];

It works like a charm. Your solution is just what I needed. Thank you so much — Santiago Sotelo Docío, Mar 17 '23 at 14:53

Angular 2 - Audio player component gets destroyed when navigating between routes

1 Answers1