Angular: как определить активный маршрут с параметрами?

Просто проверьте автоматически определенный класс router-link-active для элемента a.

С новым, перспективным маршрутизатором Angular 2 (в версии 3.0-alpha.7, когда я пишу это), это очень просто.

Все, что вам нужно сделать, это использовать директиву [routerLinkActive] в вашей ссылке.

<a [routerLinkActive]="['active']" [routerLink]="['/contact',  contact.id ]">
    {{contact.name}}
</a>

Это то, что вы будете использовать, когда Angular 2 будет выпущен по-настоящему, а не кандидатом на выпуск. Я использую альфа-версию маршрутизатора сейчас и не имею никаких проблем.

Это демонстрирует Plunk. Вы можете видеть, что ссылки становятся красными, когда вы нажимаете на них. Это директива, присваивающая им класс active. Конечно, вы можете использовать любое имя класса по вашему выбору.

В Angular 2 rc1 router.isRouteActive больше не существует. Мне нигде не удалось найти работающее решение, но я смог решить его следующим образом (специальный метод isActiveRoute делает свое дело):

App.component.ts:

import { Component } from '@angular/core';
import { Routes, Route, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HomeComponent } from './home.component';
import { P1Component } from './p1.component';

@Component({
    selector: 'app',
    templateUrl: './app/app.template.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([
    { path: '/', component: HomeComponent },
    { path: '/p1', component: P1Component }
])

export class AppComponent implements OnInit {

    constructor(public router: Router){ }

    isActiveRoute(route: string) {
        return this.router.serializeUrl(this.router.urlTree) == this.router.serializeUrl((this.router.createUrlTree([route])));
    } 
}

Приложение.template.html:

            <ul class="nav navbar-nav">
                <li [class.active]="isActiveRoute('/')">
                    <a class="nav-link" [routerLink]="['/']">Home</a>
                </li>
                <li [class.active]="isActiveRoute('/p1')">
                    <a class="nav-link" [routerLink]="['/p1']">Page 1</a>
                </li>

Я пытался установить класс active без необходимости точно знать текущее местоположение (используя имя маршрута). Это лучшее решение, которое у меня есть до сих пор.

Вот как RouteConfig выглядит (я немного изменил его, чтобы он выглядел так, как вы хотите):

@RouteConfig([
  { path: '/', component: HomePage, as: 'Home' },
  { path: '/signin', component: SignInPage, as: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, as: 'ProfileFeed' },
])

И View будет выглядеть так:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

До сих пор это было моим предпочтительным решением проблемы, оно может быть полезно и для вас.

Вы можете использовать новую службу определения местоположения из общего пакета Angular2: https://angular.io/docs/js/latest/api/router/Location-class.html#!#path-anchor

import { Location } from '@angular/common';

...

export class YourClass {
    constructor(private _loc:Location) {}

    getCurrentPath() {
        return this._loc.path();
    }
}

Примечание. Лучше использовать службу маршрутизатора для запуска изменений маршрута. Используйте Location только в том случае, если вам нужно взаимодействовать или создавать нормализованные URL-адреса вне маршрутизации.

Обратите внимание: в документации говорится об импорте из router, но последняя бета-версия, которая у меня есть, имеет Location службы в common.

попробуй это :

<li   class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
            <div class="ann_header_menu_left ann_profile_avatar_small"></div>
            <span>Vishnu </span>
          </li>

Для Angular версии 4+ определение активного маршрута в шаблоне довольно просто, поскольку для этой цели существует встроенная директива с именем routerLinkActive, которую вы можете использовать следующим образом:

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>