Почему routerLinkActive не срабатывает, если у routerLink есть привязка?

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

SectionA > SectionB > SectionC

где SectionA есть id=1 и так далее. В то же время я получил routerLink в своем боковом меню для выбранного в данный момент элемента, который в приведенном выше примере указывал бы на SectionC (id=3). Я сохраняю их синхронными, генерируя событие, когда кто-то нажимает на навигационную цепочку, а затем привязываю id из события к routerLink в моем боковом меню:

<li>
    <a [routerLink]="['/section, section? section.id : 0]" [routerLinkActive]="['active']"></a>
</li>

Таким образом, если пользователь уходит от этого компонента, он может вернуться в то же состояние, просто нажав кнопку в боковом меню (вместо того, чтобы переходить к целевому разделу с нуля).

Однако на самом деле это работает нормально, если я перемещаюсь по хлебным крошкам (и, таким образом, использую привязку к section сверху), routerLinkActive не срабатывает, хотя текущий URL-адрес и URL-адрес кнопки бокового меню идентичны.

Только если я нажимаю кнопку бокового меню напрямую, применяется класс active, он не работает через привязку.

Он работает для URL-адресов без параметров (там нет привязки), поэтому я предполагаю, что это связано с проверкой изменений Angular.

Вопрос в том, является ли это предполагаемым поведением, и если да, то что я должен сделать, чтобы заставить это работать в любом случае?


angular angular-template angular2-routing angular2-router3
person Thorsten Westheider    schedule 28.06.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Скопировал этот вопрос и пометил как вики, так как я не пытаюсь заработать карму: https://stackoverflow.com/a/40528170/88066

1) в вашем компоненте

import {Router} from 'angular2/router';

isActive(instruction: any[]): boolean {
    return this.router.isActive(this.router.createUrlTree(instruction), true);
}

2) в вашем html

<a [class.active]="isActive(['user', currentUser.name])">

Маршрутизатор документы на angular.io

person Community    schedule 25.01.2017

arrow_upward
-2
arrow_downward

Должен быть

  <a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a>

Потому что это directive

 ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkActive];

Также рассмотрите возможность указания routerLinkActiveOptions, если это так:

<a [routerLinkActiveOptions]="{exact: exact}" ...

person null canvas    schedule 28.06.2016
comment
К сожалению, это тоже не работает, проверьте этот plnkr - plnkr.co/edit/iBnbmotFGp5FM0atEo6N?p= предварительный просмотр - person Thorsten Westheider; 29.06.2016