2015-10-28 74 views
8

UPDATE 15年11月1日Angular2路由器恨我的AUX路線

輔助路線,不支持很好阿爾法的45 Link to Github Issue

道具@埃文 - 鰈

原問題

我看了Brian Ford在Angular2路由器上的講話:https://youtu.be/z1NB-HG0ZH4

我開始嘗試使用「輔助」路線,我的代碼投擲了大量的錯誤。

我在阿爾法44mgechev's Angular Seed

在我app.ts組件這是非常標準的,爲RouteConfig我有:

@RouteConfig([ 
    { path: '/', component: HomeCmp, as: 'Home' }, 
    { path: '/run', component: RunCmp, as: 'Run' }, 
    { path: '/manage', component: ManageCmp, as: 'Manage' }, 
    { path: '/user', component: UserCmp, as: 'User' }, 
    { path: '/settings', component: LocalSettingsCmp, as: 'Settings' }, 
    { aux: '/login', component: LoginCmp, as: 'Login' } 
]) 

我app.html:

<div id="main-content" class="full"> 
    <router-outlet></router-outlet> 
    <router-outlet name="login"></router-outlet> 
</div> 

HomeCmp我把一個「登錄」鏈接:

<p>Router Link to activate login form: <a [router-link]="['/',['Login']]">Login</a></p> 

現在我已經在正常工作該組件的其他路由器的鏈接,但是當我添加此鏈接給我這個錯誤:

例外:

EXCEPTION: "/" is only allowed at the beginning of a link DSL. in [null] 
BrowserDomAdapter.logError @ angular2.dev.js?v=0.0.0:21835 
BrowserDomAdapter.logGroup @ angular2.dev.js?v=0.0.0:21846 
ExceptionHandler.call @ angular2.dev.js?v=0.0.0:4431 
(anonymous function) @ angular2.dev.js?v=0.0.0:19543 
NgZone._onError @ angular2.dev.js?v=0.0.0:10711 
errorHandling.onError @ angular2.dev.js?v=0.0.0:10630 
run @ angular2.dev.js?v=0.0.0:141 
(anonymous function) @ angular2.dev.js?v=0.0.0:10651 
zoneBoundFn @ angular2.dev.js?v=0.0.0:111 
lib$es6$promise$asap$$flush @ angular2.dev.js?v=0.0.0:1301 
angular2.dev.js?v=0.0.0:21835 

錯誤:

Error: "/" is only allowed at the beginning of a link DSL. 
    at new BaseException (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:16034:21) 
    at RouteRegistry.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:1645:17) 
    at ChildRouter.Router.generate (http://localhost:5555/lib/router.dev.js?v=0.0.0:2044:43) 
    at RouterLink.Object.defineProperty.set [as routeParams] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1323:52) 
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:118:40) 
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12) 
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14) 

上下文:

{element: a, componentElement: home, context: HomeCmp, locals: Object, injector: Injector…} 

也拋出這個:

TypeError: Cannot read property 'child' of undefined 
    at ChildRouter.Router.isRouteActive (http://localhost:5555/lib/router.dev.js?v=0.0.0:1803:77) 
    at RouterLink.Object.defineProperty.get [as isRouteActive] (http://localhost:5555/lib/router.dev.js?v=0.0.0:1315:29) 
    at AbstractChangeDetector.ChangeDetector_HomeCmp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20415:14), <anonymous>:153:44) 
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20209:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20192:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20196:12) 
    at AbstractChangeDetector._detectChangesInLightDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20253:14) 
    at AbstractChangeDetector.runDetectChanges (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20193:12) 
    at AbstractChangeDetector._detectChangesInShadowDomChildren (http://localhost:5555/lib/angular2.dev.js?v=0.0.0:20259:14) 

不過,所以我不知道,如果它造成第一還是什麼的第一個錯誤後,它的。

我也試過Way from the Angular2 API Docs 但它會引發相同的錯誤。

  • 我做錯了什麼?
  • 該語法不支持嗎?
  • 有沒有人正確使用Aux Routes的例子?

注:我試圖讓路由器與Plunker工作,但它不喜歡的URL或東西,否則我會提供了一個現場情況

UPDATE 15年10月29日 的第一個錯誤是來自路由器鏈接,不讓你以任何方式使用「\」或「。\」。你必須指定路由名稱。

輔助仍然無法正常工作......

回答

3

的routerLink的第一個參數的路徑匹配陣列

在你的情況下,它會匹配/Home

<a [routerLink]="['/',['Login']]">Login</a> 

改爲使用:

<a [routerLink]="['/Login']">Login</a> 

AFAIK,參數是一個數組,因爲路由也可以包含一個或多個通配符匹配。

注意:鏈接中使用的Login指向路由的別名(即as字段)。

來源:

更新:

留意。 angular2團隊計劃在未來的版本中將RouterLink/<router-link>更改爲RouterViewport/<router-viewport>

來源:angular/issues#4679

UPDATE2:

  • [路由器鏈路] - > [routerLink]
+1

我相信他們正在改變'<路由器出口>'而不是'' –

+0

因此,您的鏈接對於**標準**路由器鏈接是正確的,但是當使用多個網點和「Aux」鏈接時, w使用數組作爲第二個參數來指定輔助的名稱。哪一個不起作用......其目的是在一個組件上有多個'',但它對我不起作用。我的使用案例是一個登錄/註冊表格,這是談話的例子... –

+0

是的...我意識到事後。看起來他們仍在工作https://github.com/angular/angular/issues/4319 –