javascript - 在 Angular 2 中使用 routerLinkeActive 时出现未定义的根错误

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) 中的一个错误，如果存在 routerLinkActive，则不允许将 routeLink 与非 anchor 标记一起使用。该问题似乎已在 master 中修复(参见:https://github.com/angular/angular/issues/9755)

对于当前版本，您需要将按钮包裹在 anchor 标记周围。它应该看起来像这样:

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

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