Add possiblilty to ask router for the current route.

At the moment it is only possible to get the current path via the Location.path()method. When working with the "Routing DSL" it would be way more useful to check if a route is active via this DSL also. E.g. I want to do something like this

<li [class.active]="isActive('Dashboard')">
       <a [router-link]="['/Dashboard']" class="link">Dashboard</a>
</li>

But to be able to implement "isActive" I need the nameof the current route. There are also cases where it would be useful to access the routeData of the current Route. At the moment it is only possible to access this information within the routed component, but not via the "Router" class

The router normally set the router-link-active class on active router links.
You can also check the Router.isActive method in the documentation.

@cghislai

@cghislai the router-link-active class is set on the link - I need the information in the surrounding <li> Router.isActive needs an Instruction as input, and I don't see an easy way to get the Instruction for a Route name.

This is what I use

<li [class.active]="isActive('/Dashboard')">
       <a [router-link]="['/Dashboard']" class="link">Dashboard</a>
</li>

This adds the 'active' class to the active link and removes it from any others.

isActive (path) {
    return this.location.path().indexOf(path) > -1;
}

This extremely common scenario needs to be addressed. This a glaring omission. router-link-active class is an insufficient solution.

It's pretty common to detect current route by name.
Also, OnActivate interface did not worked for me when I wanted to keep up to date last instruction.

in the meantime, if you want the current route instruction, you can subscribe to the router for URL updates and convert that into an instruction.

import {Injectable} from 'angular2/core';
import {Router, Instruction} from 'angular2/router';

@Injectable()
export class RouterState {
  _current: Instruction;

  constructor(public router: Router, location: Location) {
    // subscribe to router url updates
    router.subscribe((url) => {
      // convert the current url into an instruction
      this._getInstruction(url);
    });
  }

  private _getInstruction(url) {
    this.router.recognize(url).then((ins) => {
      if (ins) {
        // Store the current route instruction
        this._current = ins;
      }
    });
  }

  current() {
    // return current instruction
    return this._current;
  }
}

Needs to be as easy as http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

@oliverjanik

@oliverjanik Agreed.

@oliverjanik

@oliverjanik 👍

+1

Endre Karlson
18. feb. 2016 3.46 p.m. skrev "curlyfro" [email protected]:

+1

—
Reply to this email directly or view it on GitHub
#5335 (comment).

I understand your point but angular 2 suffers heavily from second system syndrome and this yet another manifestation. Most of the time I need my simple use case. I have yet to move a "feature" component somewhere to a different location. How often do you think that happens? Navigation and visual hierarchy is usually decided quite early in project development. With nested routes e.g. a/1/b/2/c/3 this effect compounds and you get 3 extra outlets. While I haven't measured the performance, this not good.

Sorry for the thread hijack.

@oliverjanik

So @oliverjanik what exactly do you want to happen? If you do not want to use the component hierarchy to define the breadcrumb hierarchy then you are back to using the URL. The current URL is available to you via a subscription on the rootRouter, if I remember correctly. So you should be able to take that URL and parse it your self to identify the breadcrumbs.

The core of the problem is how router is designed. This worked quite well in UI Router using abstract routes.

So what you are really saying is that you would like to have Abstract Routes?

@petebacondarwin

@petebacondarwin Regarding your suggestion here, can you please advise how this should be handled for Angular 1.5 using the new router?

This always outputs true:

var instruction = $rootRouter.generate(['App/Testing']);
console.log($rootRouter.isRouteActive(instruction));

I am using version 0.2.0 of the router so have to inject $rootRouter as far as I know?

@alexgoldstone

@alexgoldstone - you don't need to inject $rootRouter if you are inside a routed component. Instead, you can bind to the $router attribute on the component. For instance if you create your component using the 1.5 helper you can do:

mod.component('myComp', {
  template: '...'.
  bindings: { $router: '<' },
  controller: MyComponent
});

Check out the guide for this... https://docs.angularjs.org/guide/component-router

Can you give me more context for your problem?
What is the current route when you are generating the ['App/Testing'] route?

@petebacondarwin

@petebacondarwin Thank you, your answer was extremely helpful as I was not aware that any official documentation had been released (it hadn't last time I checked) and I did not realise I could bind to the $router attribute.

My use-case is simply that I want to identify the current route from a parent component so that I can highlight the nav element relating to the currently active route:

<li ng-class="{ 'is-active': $ctrl.routeIsActive('Analytics') }"><a ng-link="['Analytics']">...

I would have still expected the router to provide an isActive function that I can pass a path to rather than an instruction but at least this makes it very easy to create one.

Trying to bring my code inline with the new documentation, I found that I cannot bind to the $router attribute from the root (app) component - only from its child components. Is this intentional or a bug? Again, the use case is that if the root component's template contains the primary navigation (inline with the example provided in the documentation) then I would want to change the styling of the currently active link.

Can you also please expose the name of the route on the ComponentInstruction?

Frequently I have multiple routes pointing to the same component, however, sometimes I need to know which route was hit.

@alexgoldstone

@alexgoldstone - this is expected behaviour since the root component is instantiated manually by you in the top level HTML template (i.e. index.html).

@oliverjanik - exposing the name seems like a reasonably request can you create a separate issue to track that feature?

Closing this as the originally requested feature is now merged into master.

@evanplaice

@evanplaice dude, freakin a! put this on a github gist it's fucking genius!

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Add possiblilty to ask router for the current route. #5335

5 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add possiblilty to ask router for the current route. #5335

Description

Activity

cghislai commented on Nov 17, 2015

choeller commented on Nov 17, 2015

evanplaice commented on Dec 29, 2015

oliverjanik commented on Jan 8, 2016

miraage commented on Jan 8, 2016

brandonroberts commented on Jan 8, 2016

oliverjanik commented on Jan 9, 2016

brandonroberts commented on Jan 9, 2016

miraage commented on Jan 9, 2016

curlyfro commented on Feb 18, 2016

ekarlso commented on Feb 18, 2016

5 remaining items

oliverjanik commented on Feb 29, 2016

petebacondarwin commented on Feb 29, 2016

oliverjanik commented on Feb 29, 2016

petebacondarwin commented on Feb 29, 2016

alexgoldstone commented on Mar 7, 2016

petebacondarwin commented on Mar 7, 2016

alexgoldstone commented on Mar 8, 2016

oliverjanik commented on Mar 9, 2016

petebacondarwin commented on Mar 9, 2016

tatsujb commented on Feb 15, 2018

angular-automatic-lock-bot commented on Sep 13, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions