2015-10-28 44 views
8

UPDATE 11/1/15Angular2 Router Hates My AUX Itinerari

Aux percorsi non sono supportati molto bene come di Alpha 45. Link to Github Issue

puntelli per @ Evan-passera

Domanda originale

Ho visto il discorso di Brian Ford sul router Angular2: https://youtu.be/z1NB-HG0ZH4

E ho iniziato a provare a utilizzare le route "Aux" e il mio codice sta generando un sacco di errori.

Sono su Alpha 44 su mgechev's Angular Seed

Nel mio componente app.ts è piuttosto standard, per la RouteConfig ho:

@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' } 
]) 

mio app.html:

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

All'interno del HomeCmp Ho inserito un collegamento "Login":

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

Ora ho altri collegamenti router a quella componente che funzionano bene, ma quando aggiungo questo link mi da questo errore:

Eccezione:

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 

Errore:

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) 

Contesto:

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

getta anche questo:

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) 

Ma è dopo il primo errore, quindi non sono sicuro se la sua causato dalla prima o cosa.

Ho anche provato lo Way from the Angular2 API Docs ma genera gli stessi errori.

  • Sto facendo qualcosa di sbagliato?
  • Questa sintassi non è ancora supportata?
  • Esiste un esempio di qualcuno che utilizza le route Aux correttamente?

NOTA: ho provato ricevendo il router di lavorare con un Plunker ma doesnt come quella di l'URL o qualcosa altrimenti sarei fornire un caso dal vivo

UPDATE 10/29/15 Il il primo errore è dal collegamento del router che non consente di utilizzare "\" o ". \" in alcun modo.DEVI specificare il nome della rotta.

Aux ancora non funziona ...

risposta

3

Il routerLink corrisponde al percorso del primo parametro nella matrice

Nel tuo caso sarebbe partita / o Home

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

Utilizzare invece:

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

AFAIK, il parametro è un array perché una rotta può anche includere una o più corrispondenze di caratteri jolly.

Nota: lo Login utilizzato nei punti di collegamento all'alias del percorso (ovvero il campo as).

Fonte:

Aggiornamento:

tenere d'occhio. Il team angular2 prevede di cambiare RouterLink/<router-link> in RouterViewport/<router-viewport> in una versione futura.

Fonte: angular/issues#4679

Update2:

  • [router-link] -> [routerLink]
+1

Credo stanno cambiando '' non '' –

+0

Quindi il tuo link è corretto per un ** link ** standard del router, ma quando usi più prese e il link "Aux" w usando un array come secondo parametro per specificare il nome del aux. Il che non funziona ... L'intento è di avere più '' su un componente ma non funziona per me. Il mio caso d'uso è per un login/modulo di registrazione che è l'esempio dal talk ... –

+0

Sì ... ho capito che dopo il fatto. Sembra che stiano ancora lavorando su di esso https://github.com/angular/issues/4319 –

Problemi correlati