在Angular 2中使用routerLinkeActive時出現未定義的根錯誤

我正在使用AngularJS 2創建SPA應用程序。我正在嘗試向活動路徑的按鈕添加一個類。根據Angular 2's router documentation我應該使用RouterLinkActive指令來添加一個類。但是，當我這樣做時，我得到Cannot read property 'root' of undefined錯誤。如果我從模板中刪除routerLinkActive="active"，該應用完美地工作。在Angular 2中使用routerLinkeActive時出現未定義的根錯誤

路由器代碼：

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

什麼是根源，我應該在哪裏定義它？

來源

2016-08-02 Farshad Momtaz

未定義根誤差在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>

來源

2016-08-03 16:58:09

@不知道這個！完成我的回答！ – Fals

您的按鈕元素處的routeLink是錯誤的。應該像在這裏：

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

參考：RouterLinkActive

來源

2016-08-02 22:56:21 Fals

我將按鈕代碼更改爲您提到的那個。但現在我現在得到以下錯誤解析器： 'EXCEPTION：模板解析錯誤：解析器錯誤：意外的標記/在HomeComponent @ 15：[16]中的[/ home]中的第1列（「「）' –

@FarshadMomtaz因爲你的路線只是'家'，而不是'/ home'，我想念它！ – Fals

刪除斜槓會導致相同的未定義根錯誤。但是，如果我從按鈕中刪除了'routerLinkActive =「active」'，頁面將加載，但單擊該按鈕將導致以下錯誤：'TypeError：無法讀取未定義的屬性'toString' –

在Angular 2中使用routerLinkeActive時出現未定義的根錯誤

回答

相關問題