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?

Because paths would eventually get localized. I thought it would be better to use aliases for checking on what page I'm actually on — Pietrzm, Dec 27 '15 at 16:05

konrad · Answer 1 · 2016-05-13T14:38:55.410

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);
    }
}

When inside a sub component, you can use `this._router.root.currentInstruction.component.routeName` (note _root_) - depending which root you want to know about. — ZoolWay, May 13 '16 at 06:26

score 2 · Answer 2 · answered Dec 27 '15 at 12:16

2

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

answered Dec 27 '15 at 12:16

Peter M

546
5
6

Vlado Tesanovic · Answer 3 · 2016-10-24T15:33:46.457

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

edited Oct 24 '16 at 15:33

answered Dec 27 '15 at 20:41

Vlado Tesanovic

6,369
2
20
31

1

but why not to use `location.path()` ? – Pardeep Jain Feb 22 '16 at 08:20
1

If you have hash strategy location.path will not work. url /#/about will return '/' instead of 'about' – Andzej Maciusovic Jan 21 '17 at 19:23
The newest iteration of the router does not contain `currentInstruction` what is the equivalent? – The Muffin Man Feb 10 '17 at 16:27

score 1 · Answer 4 · answered May 14 '16 at 17:50

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());
  });
}

See also http://stackoverflow.com/questions/37183874/get-the-path-or-the-name-of-the-routes-in-angular-2/37207316#37207316 — Günter Zöchbauer, May 14 '16 at 17:51

score 0 · Answer 5 · answered Mar 29 '16 at 13:29

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.

Angular2 get current route's alias

5 Answers5

Linked