angular2 using router.subscribe to watch url change

Question

I'm using router.event.subscribe @angular/router to watch the url change to execute an if statement though event.subscribe works fine. But my question is how can I avoid repeating my if statement just to show the title on these urls. It's probably something else than router.subscribe but not sure what to use for this.

basically wanted a dynamic title based on the url you are on.

this._router.events.subscribe((event) => {
            console.log('route changed');
            if(this.location.path() == '/1'){
                this.title = 'Title 1';
            } else if(this.location.path() == '/2'){
                this.title = 'Title 2';
            }
        }); 

I don't know if that make sense at all. I could change my route.ts paths to have something like { path: 'Title-1' }and just remove the - by doing .replace() but doing this will give me www.mysite.com/Title-1 but it doesn't look very friendly.

Answer 1

Here's my approach which works fine, especially for nested routes:

I use a recursive helper method to grab the deepest available title after a route has changed:

@Component({
  selector: 'app',
  template: `
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  title: string;

  private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
    var title = routeSnapshot.data ? routeSnapshot.data['title'] : '';
    if (routeSnapshot.firstChild) {
      title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
    }
    return title;
  }

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.title = this.getDeepestTitle(this.router.routerState.snapshot.root);
      }
    });
  }
}

This is assuming, that you have assigned page titles within the data property of your routes, like this:

{
  path: 'example',
  component: ExampleComponent,
  data: {
    title: 'Some Page'
  }
}