'In Angular 13 why does my route subscription stop it hits a route without a param?

I need a way to update a variable in my header component (always displayed) whenever a param changes in the URL.

My routing:

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'home',
         component: HomeComponent
      },
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
      },
    ]
  },
  {path: '**', redirectTo: 'home'}
];

The dashboard component has an ID attached to it and this is what I need to track. In the event a user goes to a page without an ID (such as the home route) I want the ID to show as 0.

I have this working to where it will track the ID as long as they continue to hit routes with an ID but as soon as they navigate to home all tracking is stopped.

header.component

import { Component, Input } from '@angular/core';
import { ClassToggleService, HeaderComponent } from '@coreui/angular-pro';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';  

@Component({
  selector: 'app-default-header',
  templateUrl: './default-header.component.html',
})
export class DefaultHeaderComponent extends HeaderComponent {

  private issuer: Subscription;

  constructor(private classToggler: ClassToggleService,
    private route: ActivatedRoute) {
    super();
  }

  issuerID: number;


  ngOnInit(): void {
    this.route.children.forEach(child => {
      child.params.subscribe(params => {
          const id = params['id'] || 0
          console.log('id ' + id)
          this.issuerID = id
      })
    })
  }
  
     //To prevent memory leak
     ngOnDestroy(): void {
      if (this.issuer)
        this.issuer.unsubscribe()
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source