Can't access RouterStateSnapshot properties on Angular custom Directive

Question

I'm coding a custom Directive that change the background-image style property according to the activated route.

To achieve this functionality, i try to reach the url property of RouterStateSnapshot, and manipulate the element's style according to url's value.

I'm logging to the console just for test.

Here's the code.

import { Directive, Renderer } from '@angular/core';
import { Router, RouterState, RouterStateSnapshot } from '@angular/router';

@Directive({
  selector: '[bgImg]'
})
export class BgImgDirective {

  constructor(
    private _renderer: Renderer,
    private _router: Router
  ) {

    var state: RouterState = this._router.routerState;
    var stateSnapshot: RouterStateSnapshot = state.snapshot;
    var url: any = stateSnapshot.url;

    console.log(url);
  }

}

console.log(url); prints nothing to the console.
The url variable is always empty

This is my root app.component template

<div bgImg>
  <app-navbar></app-navbar>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

However

If i try console.log(this._router);

This is the result:

How can I get to the value of url on different states of the Router, and properly apply an if statement to these? Do i have to make use of Observables?

Hard to tell. Perhaps you get the root router instead of the router for the segment that you actually want. It depends on where your directive is applied. — Günter Zöchbauer, Apr 23 '17 at 19:23
@GünterZöchbauer, i updated my question with the code in app.component.html — rbenvenuto, Apr 23 '17 at 21:06
You are trying to get it like router.routerState instead of router.currentRouterState.. — Denko Mancheski, Apr 23 '17 at 22:33
This means you always get the root router. Try ti subsribe to router events and get the url from the event http://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular-2/38080657#38080657 — Günter Zöchbauer, Apr 24 '17 at 02:57
@DenkoMancheski, if i try `this._router.currentRouterState`, i get a typescript error `Property 'currentRouterState' is private and only accessible within class 'Router'` — rbenvenuto, Apr 24 '17 at 17:19
@GünterZöchbauer Thanks!! Your answer worked perfectly. If you post your answer here i'll mark it as solved by you. — rbenvenuto, Apr 24 '17 at 18:57

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

You can subscribe to router events and get the URL from there

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

see also How to detect a route change in Angular 2?

edited May 23 '17 at 12:09

Community

1
1

answered Apr 24 '17 at 18:58

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · edited May 23 '17 at 11:46

This answer by Günter Zöchbauer put me on the right way to achieve what I was looking for. Here's the code:

import { Directive, Renderer, ElementRef } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import 'rxjs/add/operator/filter';

@Directive({
 selector: '[BgImg]'
})
export class BgImgDirective {

constructor(
 private _elRef: ElementRef,
 private _renderer: Renderer,
 private _router: Router
) {
_router.events
 .filter(event => event instanceof NavigationStart)
 .subscribe((event: NavigationStart) => {
  switch(event.url) {
   case "/":
    _renderer.setElementStyle(_elRef.nativeElement, "background-image", "url('../path/to/img')");
   break;
   case "/other-page":
    _renderer.setElementStyle(_elRef.nativeElement, "background-image", "url('../path/to/img')");
   break;
   }
  });
 }
}

Can't access RouterStateSnapshot properties on Angular custom Directive

2 Answers2