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

Ответ 1

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

Ответ 2

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

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

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

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

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

Ответ 3

В 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])));
    } 
}

App.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>

Ответ 4

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

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

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

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

<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>

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

Ответ 5

попробуйте следующее:

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

Ответ 6

Вы можете использовать новую службу определения местоположения из общего пакета 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();
    }
}

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

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

Ответ 7

Для Angular версии 4+ определение активного маршрута в шаблоне довольно просто, поскольку для этой цели существует директива build-in 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>