Angular - URL geändert, aber nicht verladen

Question

Das ist mein app-routing-module.ts

const routes: Routes = [ 
    { 
     path: '', 
     component: LayoutComponent, 
     children: [ 
      { 
       path: 'parent', 
       component: ParentComponent, 
       children: [ 
        { path: ':id/:name', component: ChildComponent } 
       ] 
      } 
     ] 
    }, 
]; 

ich eine Funktion geschrieben habe, um zu überprüfen, ob die URL mit einem statischen Wert in parent.component.ts arbeiten.

goToChild() { 
    this.router.navigate(['1/john'], { relativeTo: this.route }); 
} 

Und ich rufe die Funktion in parent.component.html.

<button class="btn btn-primary" (click)="goToChild()">Search</button> 

Wenn ich auf die Schaltfläche klicken, erhalte ich die richtige URL in der Adressleiste,

localhost:3000/parent/1/john 

Aber der Blick nie Lasten, es bleibt auf dem parent.component.html. Ich bin ziemlich neu in Angular und ich verwende Version 5.

Und wenn ich meine Routen so habe, funktioniert es gut.

const routes: Routes = [ 
    { 
     path: '', 
     component: LayoutComponent, 
     children: [ 
      { 
       path: 'parent', 
       component: ParentComponent 
      }, 
      { 
       path: 'parent/:id/:name', component: ChildComponent 
      } 
     ] 
    }, 
]; 

Es fühlt sich besser für mich die ChildComponent Route unter Kindern Array der ParentComponent zu setzen, aber wenn ich es tun. Nur die URL ändert sich, nicht die Ansicht.

Jede Hilfe wird sehr geschätzt.

Answer 1

Können Sie die aktuelle parent.component.html freigeben? Haben Sie eine <router-outlet></router-outlet> innerhalb der Vorlage? So erlauben Sie die Kindernavigation