angular 2: Changing static parts of the view according to path

Question

First of all, sorry for the weird title. I couldn't find a better summary.

So what I want is to create an application which consists of a basic 3 part structure (header / content / footer). Depending on the route that is active, the header part should change (every header is a component on its own).

So far the header that is displayed is determined by an [ngSwitch] statement in the "mainApp.component" and looks like this:

<span [ngSwitch]="currentLocation">
    <span *ngSwitchWhen="'/login'"><login-header></login-header></span>
    <span *ngSwitchWhen="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>

Where the "mainApp.component.ts" looks like this:

import { Component, OnInit } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {HomeHeaderComponent} from './home-header';
import {LoginHeaderComponent} from './login-header';
import {FooterComponent} from './footer';
import {Router} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'mainApp.component.html',
  styleUrls: ['mainApp.component.css'],
  directives: [HomeHeaderComponent, LoginHeaderComponent, FooterComponent, ROUTER_DIRECTIVES],
  providers: []
})

export class mainApp implements OnInit {
  public currentLocation: string;
  constructor(public router: Router) {
    this.currentLocation = location.pathname;
  }

  ngOnInit() {

  }
}

This works just fine when I go to my localhost:4200/login or localhost:4200/home manually as it renders the mainApp.component, checks which is the current route and displays the header accordingly. However, when I change the route by eg a button click via

<span class="btn btn-default headerButton homeButton" (click)="navigateToHome()"></span>

Where navigateToHome() is simply

navigateToHome() {
  this.router.navigate(['/home']);
}

The header stays the same as the change detection doesn't take the route change into concideration and therefore doesn't rerun the [ngSwitch] / rerender the mainApp.component.

I already thought about including the header inside the components template they belong to but if there is a way to do it in the main component I would prefer that.

If you guys got any idea of how to solve this, or ways to do it better / another way / the way its best practice I'm glad to hear of it.

Thanks.

Answer 1

The answer here is to subscribe to the router events like so:

this.router.events.subscribe((e) => {e instanceof NavigationEnd? this.currentLocation = '/' + e.url.split('/')[1] : ''});

This subscribes to the routers events in general and changes the currentLocation variable whenever the navigation ends succesfully by checking the url property of the returned value.

I implemented this in the (at the time of this post) current router version @angular/routerv3.0.0-alpha8 which works just fine.