This is how I do it:
-- Firstly, create a service that will be responsible for sharing the route names between components. And create a new Subject "subjects work as an Observable and Observer at the same time"
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';
@Injectable()
export class RouteNames{
public name = new Subject();
}
-- Secondly, provide your service at the application level by injecting it on bootstrap:
import {RouteNames} from './route-names.service';
bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames]);
Now, all you need to do is inject your service into app.component and into every component that will change the route name.
app.component: subscribe to RouteNames.name subject and update the variable routeName on next.
import {RouteNames} from './route-names.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">{{routeName}}</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
...
})
@RouteConfig([
...
])
export class AppComponent {
routeName = "Component Router";
constructor(private _routeNames:RouteNames){
this._routeNames.name.subscribe(n => this.routeName = n);
}
}
Now, on CrisisCenter, Inject the RouteNames service and call next on RouteNames.name:
import {RouteNames} from '../route-names.service';
@Component({
...
})
@RouteConfig([
...
])
export class CrisisCenterComponent {
constructor(private _routeNames:RouteNames){
_routeNames.name.next('Crisis Center');
}
}
And that is it, Here is working plunker
