redirectTo in angular2 für untergeordnetes Routing

Question

So verwenden Sie redirectTo im Fall von untergeordneten Routing mit einem Parameter in angular2. meine Routing-Struktur wie diese

const appRoutes: Routes = [ 
    { path: '', redirectTo : '/home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent}, 
    { path: 'xyz/:id', component: XYZ }, 
    { 
     path: 'abc/:id', component: ABC, 
     children: [ 
      { path: '', redirectTo : 'def', pathMatch: 'prefix' }, 
      { path: 'def/:id', component: DEF } 
     ] 
    } 
] 

Aber es funktioniert nicht

auch, was ist pathMatch in Routing?

Answer 1

Auf der Suche nach Ihrem Beispielcode, wenn die Pfade 'abs /: id' und 'def /: id' den gleichen Parameter (: id) verwenden, habe ich den Parameter in der untergeordneten Routenkonfiguration und in seine Komponente wird von ihrer übergeordneten Route erhalten:

const appRoutes: Routes = [ 
{ 
    path: ':id', 
    component: SimulatorComponent, 
    children: [ 
     { 
      path: 'home', 
      component: HomeComponent 
     } 
    ] 
} 

];

In HomeComponent, dann fangen Sie die ID von den Eltern Route:

export class HomeComponent implements OnInit { 
    protected id: number; 

    constructor(protected route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.parent.params.subscribe(params => this.id = +params['id']); 
    } 

}

Answer 2

Sie sollten zu home (ohne den Schrägstrich) umleiten, da Ihr redirectTo Wert eine gegebene path, nicht eine beliebige URL entsprechen muss.

Einzelheiten zum pathMatch Attribut finden Sie im Abschnitt in den Angular2's Routing & Navigation Dokumenten.

Answer 3

pathMatch = 'voll' führt zu einer Route Hit, wenn die verbleibenden, nicht angepasste Segmente der URL Spiel ist der Präfixpfad

pathMatch = 'prefix' weist den Router an, die Weiterleitungsroute zu berücksichtigen, wenn die verbleibende URL mit dem Präfix der Weiterleitungsroute beginnt Pfad.

Ref: https://angular.io/docs/ts/latest/guide/router.html#!#redirect

Werfen wir also einen Blick auf Ihr Beispiel nehmen:

const appRoutes: Routes = [ 
    { path: '', redirectTo : '/home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent}, 
    { path: 'xyz/:id', component: XYZ }, 
    { 
     path: 'abc/:id', component: ABC, 
     children: [ 
      { path: '', redirectTo : 'def', pathMatch: 'prefix' }, //error 
      { path: 'def/:id', component: DEF } 
     ] 
    } 
] 

Fehler Linie bedeutet, dass, wenn so etwas wie abc/1 + '' (die abc/1 ist) eingegeben wird, redirectTo = 'def' (full path = 'abc/:id/def'), die nicht existiert.

Mit pathMatch = prefix wenn Sie geben etwas nach abc/1 es noch zu redirectTo = 'def' versuchen wird (z abc/1/longesturl), weil nach abc/1 + '' diese '' passt zu jedem url weil jede URL nach 1 wird es einen leeren String haben.