Angular2 get current route's alias

Question

I'm able to get current route's path like: /about, /, /news with location.path(). But how can I get its alias instead (the 'as' part in the definition of a route)?

{ path: '/about', as: 'About', component: About }

Is it possible?

Answer 1

NOTE: The following has been tested with the 2.0 beta series. The RC versions have an updated router component with breaking changes. The old one has been renamed to router-deprecated. This has not been tested yet against the new router.

The following will print Foo or Bar depending on your active route.

@Component({
    selector: 'app',
    templateUrl: 'app/app.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/', name: 'Foo', component: FooComponent, useAsDefault: true},
  {path:'/bar', name: 'Bar', component: BarComponent, useAsDefault: false},
])
export class AppComponent implements OnInit {
    constructor(private _router: Router) {
    }

    ngOnInit() {
        console.log('current route name', 
                    this._router.currentInstruction.component.routeName);
    }
}

Answer 2

You should not use location, instead you should use Router instance.

In your component, inject it in constructor with:

constructor(public router: Router)

than, you could obtain name of component with:

this.router.currentInstruction.component.routeName

I am not sure how you obtain as from router config. But RouterLink directive should be right spot to start with: https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

Answer 3

If you know the list of possible aliases then it's possible to find out the name of the current alias using a combination of router.generate and route.isActiveRoute:

For example, I have a wizard with three steps. I have a list of step aliases in an array:

private wizardAliases = [
    'wizardStep1',
    'wizardStep2',
    'wizardStep3'
];

I then use the following code to determine the current alias name:

const alias = this.wizardAliases
    .map(alias => ({ alias, navigationInstruction: this.router.generate([alias]) }))
    .filter(x => this.router.isRouteActive(x.navigationInstruction))
    .map(x => x.alias);

if (alias.length === 1) {
    console.log(`alias is ${alias}`);
}

Disclaimer: I haven't tried to see if this works with route parameters.

Answer 4

For >= Angular2 RC.x (new router)

There are no aliases anymore in the new router.

You can get the relative route of the local component

  routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void {
    console.log(curr.stringifiedUrlSegments);
  }

or the full path using

constructor(private router:Router) {}

  routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void {
    console.log(this.router.serializeUrl(tree));
  }

or

constructor(router:Router, private location:Location) {
  router.changes.subscribe(() => {
    console.log(this.location.path());
  });
}

Answer 5

Can't see a way of getting it, but one alternative is to use RouteData to pass the alias of the route

https://angular.io/docs/ts/latest/api/router/RouteData-class.html