2016-06-01 18 views
7

ApplicationComponentnon può corrispondere eventuali itinerari con percorsi per bambini e nuovo router 2 RC1 angolare

import { Component } from '@angular/core'; 
import {Router, ROUTER_DIRECTIVES, Routes, ROUTER_PROVIDERS} from '@angular/router'; 
import {SchoolyearsComponent} from "./schoolyear/schoolyears.component"; 

@Component({ 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
    ROUTER_PROVIDERS 
    ], 
    templateUrl: './app/application.component.html', 
    styleUrls: ['./app/application.component.css'] 
}) 
@Routes([ 
    { 
    path: '/', 
    component: SchoolyearsComponent, 
    }, 
]) 
export class ApplicationComponent {} 

SchoolyearsComponent

import { Component } from '@angular/core'; 
import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; 
import { SchoolyearsHomeComponent } from './schoolyears.home.component'; 
import { CreateSchoolyearComponent } from './create.schoolyear.component'; 

@Routes([ 
    { 
     path: '', 
     component: SchoolyearsHomeComponent, 
    }, 
    { 
     path: '/create', 
     component: CreateSchoolyearComponent 
    } 
]) 
@Component({ template: `<router-outlet></router-outlet>`, directives: [ROUTER_DIRECTIVES]}) 
export class SchoolyearsComponent { 
} 

schoolyears.component.html

<h3>Schoolyears</h3> 

<div> 
<a [routerLink]="['/create']">Create</a> 
</div> 

<table> 
    <tr *ngFor="let s of schoolyears" (click)="createSchoolyear()"> 
     <td>{{s.id}}</td> 
     <td>{{s.name}}</td> 
     <td>{{s.startDate}}</td> 
     <td>{{s.endDate}}</td> 
    </tr> 
</table> 

quando clicco su "Crea" routerLink ottengo questo errore:

errore

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'create'. Available routes: ['/']. 

Perché il percorso bambino non caricato? Perché la rotta/create non si trova nella matrice di percorsi disponibile?

risposta

7

Aggiornamento

Questo non è più rilevante nel nuovo router V3-beta.2.

originale

Change

@Routes([ 
    {path: '', component: SchoolyearsHomeComponent}, 
    {path: '/create', component: CreateSchoolyearComponent} 
]) 

a

@Routes([ 
    {path: '/create', component: CreateSchoolyearComponent}, 
    {path: '', component: SchoolyearsHomeComponent}, 
]) 

L'ordine dei percorsi è attualmente significativa. I percorsi più specifici dovrebbero venire prima, i percorsi meno specifici durano. Questo è un problema noto e dovrebbe essere risolto a breve.

+0

Questo non ha aiutato. Ottengo lo stesso messaggio di errore. L'attuale segemnt "crea" non si trova nelle rotte disponibili. Sembravi conoscere il mio obiettivo, ma per essere sicuro: voglio sostituire schoolyears.component.html con create.schoolyear.component.html andando a "creare" l'url. – Pascal

+0

Sembra funzionare bene in https://plnkr.co/edit/oksKwNmGvubDlpV45yEB?p=preview.Puoi provare a riprodurre il tuo problema con questo Plunker? –

+0

Spero di aver aggiunto il routerLink (che hai dimenticato nell'esempio) nel posto giusto: https://plnkr.co/edit/vjCbsqZazr0rp77xjnSm?p=preview NULLA accade nel momento in cui lo fai clic? Possiamo procedere per favore con il mio link? – Pascal

0

è necessario iniettare il router nel componente app, qualcosa di simile:

export class AppComponent { 

    constructor(private router: Router) {} 

} 

questo è normalmente necessario quando il template associato con questo componente non usa la direttiva <router-link>. Una recente modifica angolare non carica il componente router quando solo utilizzando la <router-outlet>

+0

Questo non ha aiutato. Ottengo lo stesso messaggio di errore. L'attuale segemnt "crea" non si trova nelle rotte disponibili. – Pascal

3

È necessario rimuovere il leader '/', il nuovo router lo gestisce per voi.

@Routes([ 
    {path: 'create', component: CreateSchoolyearComponent}, 
    {path: '', component: SchoolyearsHomeComponent}, 
]) 
+0

ho provato questo, e questo sembra essere corretto! –

0

Sembra che l'ordine dei percorsi menzionati in @Routes sia notevole. I percorsi più specifici dovrebbero arrivare per primi, i percorsi meno specifici durano. A seconda di come cambia il tuo @Routes a questo

@Routes([ 
    {path: '/create', component: CreateSchoolyearComponent}, 
    {path: ' ', component: SchoolyearsHomeComponent}, 
])`