Установить состояние на основе текущего маршрута в Angular2 (RC3)

Question

Предположим, у меня есть типичная настройка, боковое меню, где я могу выбрать опцию и область справа, где отображается содержимое для этой опции.

Я хотел бы построить боковое меню, используя ряд директив routerLink следующим образом:

@Component({ 
selector: 'side-menu', 
template: ` 
    <div> 
     <ul> 
      <li><a [routerLink]="['/option1']">Option 1</a></li> 
      <li><a [routerLink]="['/option2']">Option 2</a></li> 
      <li><a [routerLink]="['/option3']">Option 3</a></li> 
     </ul> 
    </div> 
` 
}) 

Кроме того, я хотел бы соответствующий <li> быть выделен, используя class="active", например. Как мне это сделать?

Конечно, всегда есть click() плюс обработчик событий, но цифра, использующая только routerLink, здесь намного чище, чем обработка событий.

Я хотел бы предоставить plnkr, но кажется, что текущий шаблон Angular2 сломан после того, как вы импортируете из @angular/router, я предполагаю, что это связано с отсутствием пула маршрутизаторов в RC3 в npm.

Answer 1

Я хотел бы выделить соответствующий <li>, используя, например, class="active". Как мне это сделать?

Как мы знаем маршрутизатор chnages angular2 в continuesly так ASAIK с новым маршрутизатором angular2 это очень легко, используя routerLinkActive директиву в вашем routerLink. например

<a [routerLinkActive]="['active']" [routerLink]="['/Demo']"> 
    Hello Link 
</a> 

здесь работает plunker Working Example

также есть много similer вопрос есть

• Angular 2: How to determine active route with parameters?
• In Angular 2 how do you determine the active route?
• In Angular 2 how do I assign a custom class to an active router link?

Update

иногда бросать ошибки

Не удается прочитать свойство 'pathsWithParams' неопределенного , так что вы должны определить это, а также с routerLinkActive

[routerLinkActiveOptions]="{exact:true}" 

посмотреть здесь

• Angular2(RC-4) :Cannot read property 'pathsWithParams' of undefined