Angular 2 — подсветка выбранного дива?

Question

[distorsion]

Суть вопроса - мне необходимо подсветить выбранный пункт меню. Делаю это вот таким кодом

файл компонента

import { Component } from '@angular/core';

declare let $: any;

@Component({
    moduleId: module.id,
    selector: 'nav-main',
    templateUrl: 'nav-main.component.html'
})

export class NavMainComponent{

    public highlightedDiv: number;

    constructor(){

    }

    public toggleHighlight(newValue: number) {
        this.highlightedDiv = newValue;
    }

}

код темплейта

<ul class="uk-nav" data-uk-nav id="main-navigation">
    <li id="home-link"  [ngClass]="{'uk-active': highlightedDiv === 1 }">
        <a [routerLink]="['/']" (click)="toggleHighlight(1)"><span class="uk-icon-home uk-icon-small"></span> Главная</a>
    </li>
    <li id="contacts-link"  [ngClass]="{'uk-active': highlightedDiv === 2 }">
        <a [routerLink]="['/contacts']" (click)="toggleHighlight(2)"><span class="uk-icon-users uk-icon-small"></span> Контакты</a>
    </li>
    <li id="task-link"  [ngClass]="{'uk-active': highlightedDiv === 3 }">
        <a [routerLink]="['/calendar']" (click)="toggleHighlight(3)"> <span class="uk-icon-calendar uk-icon-small"></span> Задачи</a>
    </li>
    <li id="product-link" [ngClass]="{'uk-active': highlightedDiv === 4 }">
        <a [routerLink]="['/products']" (click)="toggleHighlight(4)" ><span class="uk-icon-shopping-cart uk-icon-small"></span> Продукты</a>
    </li>
    <!--<li id="paper-link" (click)="setActive('paper-link')">-->
        <!--<a href="#"><span class="uk-icon-list uk-icon-small"></span> Отчёты</a>-->
    <!--</li>-->
</ul>

Однако подстветка срабатывает только на повторное нажатие на див. В чем может быть ошибка?

Answer 1

[Ivan Stroykin]

Для навигации используют routerLinkActive="active", который при выбранном роуте добавляет класс "active", который можно стилизовать для навигации соответствующим образом
Мини пример:

<li routerLinkActive="active">
  <a [routerLink]="['/item1']">Пункт 1</a>
</li>
<li routerLinkActive="active">
  <a [routerLink]="['/item2']">Пункт 2</a>
</li>