5

I'm trying to get the current route name or route path in my app.component when the route changes so that I can use the route name as a page class around a wrapper div. I'm trying to figure out the best way to handle this. Previously I was subscribing to the router changes property like I have listed below, but it seems like this is no longer available with @angular/router 3.0.0-alpha.3. If anyone has any thoughts or suggestions I would be most grateful. 

this.router.changes.subscribe((val) => {
  var path = this._location.path();
  if (path.indexOf('page-name') !== -1) {
    this.pageClass = 'page-name';
  }
})
orion583
  • 51
  • 3

2 Answers2

7

Steve's answer is the one documented currently, but the url observable on ActivatedRoute is not firing for me except when I first hit the base url (ex: going from /index to /index/item works, but going from /index/item to index/item/2, index/dashboard, or even /index does not).

I'm not sure if the following solution is a best practice nor what the performance implications are, but I was able to get the active route on the NavigationEnd event of the router with the following:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES, Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'navbar',
    directives: [ROUTER_DIRECTIVES], 
    template: `
                ...
              `    
})

export class NavBarComponent implements OnInit, OnDestroy {
    private sub: any;

    constructor(private router: Router) {
    }

    ngOnInit() {
        this.sub = this.router.events.subscribe(e => {
            if (e instanceof NavigationEnd) {
                console.log(e.url);
            } 
        });
    }


    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

This fires every time you change the route, regardless of how deep you are in the url tree or where you navigate to/from.

mike d
  • 869
  • 1
  • 8
  • 15
  • +1: I had a similar problem. The observable of `ActivatedRoute` was not firing when navigating through the app. But the `RouterLinkActive` directive changed the link classes according to the current route correctly. `RouterLinkActive` uses the same approach as in this answer: listening for the `NavigationEnd` event. – Biggie Nov 05 '16 at 11:40
0

This would probably help,

import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html'
})
export class MyComponent implements CanActivate {
  constructor(private router: Router) {}

  canActivate(state: RouterStateSnapshot) {
   // this is the future route you are intended to visit
   console.log(state.url);
  }
}

More details at https://angular.io/docs/ts/latest/guide/router.html

codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • OnActivate interface doesn't exist anymore withe the router v3, so i don't think it will work. And by the way, RouteSegment class either. – Maxime Jun 20 '16 at 11:29
  • @Maxime is correct, both RouteSegment and OnActive are no longer available in v3. I get the following errors when I try to include them. @angular/router/index"' has no exported mng 'RouteSegment'. @angular/router/index"' has no exported mng 'OnActivate' – orion583 Jun 20 '16 at 15:44
  • Same issue, RouteSegment is gone. What are we supposed to use now??? I hate these massive "RC" changes. – Luke Dupin Sep 06 '16 at 02:45
  • 1
    @LukeDupin Yeah, me too. Each RC was like different version. By RC6 means Angular 6 ;-) – codef0rmer Sep 07 '16 at 05:51
  • @codef0rmer No joke! It causes me to look at ReactJS everytime I upgrade, but then I come crawling back to Angular6. – Luke Dupin Sep 09 '16 at 17:22