Kinder heißt es in Angular 2 Router verwenden werfen Fehler

Question

Heres meinen Router config:

import { RouterConfig } from '@angular/router'; 

... 

export const AppRoutes : RouterConfig = [ 
    { 
    path: '', 
    redirectTo: 'myview', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'myview', 
    component: ViewComponent, 
    children: [{ 
     path: 'hello', 
     component: HelloComponent 
    }] 
    }, 
]; 

Wenn ich versuche, die Seite, die ich die folgende Fehlermeldung zu laden:

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: '' 

Allerdings, wenn ich das machen Kind Route ein Geschwister, wie folgt:

export const AppRoutes : RouterConfig = [ 
    { 
    path: '', 
    redirectTo: 'myview', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'myview', 
    component: ViewComponent 
    }, 
    { 
     path: 'hello', 
     component: HelloComponent 
    } 
]; 

Ich bin in der Lage, die Seite ohne Fehler zu laden. Was mache ich falsch?

Answer 1

Da die Art, wie Sie es entworfen haben, ist bei der ersten Belastung es auf ViewComponent Komponente landet, aber ViewComponent hat Kind so müssen auf innere Komponente umleiten.

Sie müssen eine weitere Route zu den Kindern hinzufügen, die '' zu hello Komponente umleiten wird.

export const AppRoutes: RouterConfig = [ 
    { path: '', redirectTo: 'myview', pathMatch: 'full'}, 
    { path: 'myview', component: ViewComponent, 
     children: [ 
     { path: '', pathMatch: 'full', redirectTo: 'hello' }, //added redirection to hello 
     { path: 'hello', component: HelloComponent } 
    ] 
    } 
]; 

Note: Make sure you have <router-outlet></router-outlet> in myview component HTML so that child route view can be shown correctly.

Answer 2

Sie jede Route für '' in Ihrem RouterConfig nicht verwenden.

Wie nach Umleitung wird der neue Pfad https://yourdomain/myview/ sein. Und dafür haben Sie nur erstellt https://yourdomain/myview/hello Route in RouteCoFig

Ich habe eine App in Winkel 2 erstellt. Sie können die Quelle here auf Github überprüfen.

Fügen Sie einfach folgende Zeile zu Ihrer Kinder Pfad Array:

{path: '', component: HelloComponent }

prüfen hero.routes.ts und dragon.routes.ts Dateien, die sie Ihnen helfen, ein klareres Verständnis Routing. Hoffe es wird helfen. Vielen Dank.