неопределенная ошибка root при использовании routerLinkeActive in Angular 2

Question

Я использую AngularJS 2 для создания приложения SPA. Я пытаюсь добавить класс к кнопке для активного пути. Согласно Angular 2's router documentation, я должен использовать директиву RouterLinkActive для добавления класса. Однако, когда я делаю это, я получаю ошибку Cannot read property 'root' of undefined. Приложение отлично работает, если я удалю routerLinkActive="active" из шаблона. Код

Маршрутизатор:

export const routes: RouterConfig = [ 
    {path : '', redirectTo: 'home', pathMatch: 'full'}, 
    {path : 'home', component : HomeComponent} 
    {path : 'item', component : ItemListComponent} 
    {path : 'item/:id', component : ItemComponent}, 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

HTML код шаблона:

<button [routerLink]="['home']" class="btn btn-block" routerLinkActive="active">Home</button> 
<button [routerLink]="['item']" class="btn btn-block">Items</button> 

Компонент Код:

@Component({ 
    selector: 'home-page', 
    directives: [ROUTER_DIRECTIVES], 
    precompile: [HomeComponent, ItemListComponent], 
    templateUrl: `app/templates/main-page.template.html` 
}) 
export class HomePageComponent { } 

Ошибка:

EXCEPTION: Error in app/templates/main-page.template.html:15:8 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'root' of undefined 

Что такое корень и где его определить?

Answer 1

Неопределенное корень ошибки является ошибка в текущей версии angular2 (2.0.0-rc.4), что не позволяет routeLink быть использованы с неядерными тегами, если присутствует routerLinkActive. Проблема кажется фиксированной в мастер-классе (см.: https://github.com/angular/angular/issues/9755)

Для текущей версии вам нужно будет обернуть кнопку вокруг якорной метки. Он должен выглядеть примерно так:

<a routerLink="/home" routerLinkActive="active"> 
    <button class="btn btn-block" >Home</button> 
</a> 

<a routerLink="/item"> 
    <button class="btn btn-block">Items</button> 
</a> 

Answer 2

routeLink Неправильный элемент кнопки. Должно выглядеть как здесь:

<button [routerLink]="home" class="btn btn-block" routerLinkActive="active">Home</button> 

Ссылка: RouterLinkActive