3

Is it possible to take a URL or path and find out which route it matches in the code-behind?

Ex: Router.matchRoute('my/route') returns information about the matching route, like:

{
  path: 'my/route',
  component: HeroListComponent,
  data: { title: 'Heroes List' }
}

Basically, what I'm trying to do is to tell if the route of my current URL/path matches that of the one being navigated to.

Eric R
  • 673
  • 2
  • 9
  • 15
  • You want to check the current path? – onetwo12 Jul 22 '17 at 23:05
  • I'd take a look at `ActivatedRoute` class from `@angular/router` – Jake Smith Jul 22 '17 at 23:21
  • @onetwo12 I want to check if the current path and the requested navigation path resolve to the same route. – Eric R Jul 23 '17 at 02:37
  • @JakeSmith I can do that for the current URL, but is there a way to do that for a specified URL? Ex: I'm on `/my/route` but I want to test it `/my/route2` resolves to the same route or a different one. – Eric R Jul 23 '17 at 02:38
  • You could cache the URL so that the next time your subscription gets a route, you can compare to the one that was cached. – Jake Smith Jul 23 '17 at 02:41
  • @JakeSmith I'm not concerned about getting the URL, but finding out if they both match the same route or not. I'm trying to solve a problem where Angular doesn't update all the components when a variable changes in the URL but the route doesn't actually change. – Eric R Jul 23 '17 at 02:43
  • I'm misunderstanding you apparently but I think my idea still works for my current understanding of your problem. Save the URL you went to in a variable in app.component.ts and then next time a navigation occurs, compare the url to your variable. – Jake Smith Jul 23 '17 at 05:24

1 Answers1

1

If you want to get the current URL and make some decisions in the component code based on what it is, for example adding a style to colour the current item in a navigation menu, then you can get the current URL from the Router and compare it to a known value to do something.

 import { Router } from '@angular/router';

 constructor(
    private router: Router
 ) {}

Then you can write functions to check for a particular route:

 isSomePage() {
    if (this.router.url.includes('/my-page-path/')) {
        return 'active';
    } else {
        return '';
    }
 }

And then bind thing function to ngClass to add the class (active) to that item and style it with css.

 <div [ngClass]="isSomePage()">
    "colour me when the URL matches the isSomePage function"
 </div>

Then style this via css

div.active {
    color: white;
    background-color: red;
}

In the case where you're staying in one place and want to monitor the URL for changes, you can subscribe to router.events, for example if you were passing an 'id' variable via URL like this:

http://localhost:4000/#/home/my-component/?id=1146605

You could subscribe to the changes in id values - in this example I'm logging the values to the console, but you can do whatever you like with the value once you've got it here.

import { Router, NavigationEnd, Params } from '@angular/router';

var routerPassedParam

  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {
        console.log("event", event);
        this.route
          .queryParams
          .subscribe(params => {
            // Defaults to 0 if no query param provided.
            var routerPassedParam = +params['id'] || 0;
            console.log('Query param routerPassedParam: ', routerPassedParam);
          });
      })
}
Stephen R. Smith
  • 3,310
  • 1
  • 25
  • 41