Question

我正在使用AngularJS 2来创建SPA应用程序。我正在尝试为活动路径的按钮添加一个类。根据{{3}}我应该使用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与非锚标记一起使用。这个问题似乎在master中得到修复（参见：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

在Angular 2

2 个答案: