Keine Routen gefunden: mit Query Params

Question

Ich versuche, eine Route mit einem optionalen Parameter aufzurufen.

Mein Router

const appRoutes: Routes = [ 

    { path: '', redirectTo: 'bo', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'bo', component: LayoutComponent, 
     children: [ 
      { path: '' , redirectTo: 'history', pathMatch: 'full'}, 
      { path: 'history', component: HistoryComponent } , 
      { path: 'history/details:id', component: DetailsComponent } 

     ] 
    },  
]; 

, wie ich es nennen

this.router.navigate(['./details', {id: myVarID}], { relativeTo: this.route }); 

Fehler: keine Routen entsprechen: 'bo/Geschichte/details; id = myIdValue'

Aber es funktioniert, wenn Ich definiere es im Router mit einem Schrägstrich und rufe es durch manuelles Einfügen in die URL auf:

{ path: 'history/details/:id', component: DetailsComponent } 

Auch wenn ich ein ';' anstatt eines '/' im Router funktioniert es nicht. Ich möchte die Route mit der router.navigate Funktion aufrufen!

Answer 1

{ path: 'history/details:id', component: DetailsComponent } 

Änderung es,

{ path: 'history/details/:id', component: DetailsComponent } //<----need to put router param after slash 

und nennen Sie es wie,

this.router.navigate(['/details', {id: myVarID}] 

Answer 2

In Ordnung, so scheint es, ich eine große Verwirrung gemacht.

Ich wollte die Route mit Abfrage-Parameter zuzugreifen, aber ohne den Schrägstrich, so ist die Lösung:

Route:

{ path: 'history/details', component: DetailsComponent } 

Call:

this.router.navigate(['details', {id: myVarID}], { relativeTo: this.route }); 

/: id ist nicht hier, weil den Abfrageparametern kein Schrägstrich vorangestellt werden muss und sie optional sind. Die Route wird erstellt sein/bo/Geschichte/details; id = myVarIDContents

Und im Inneren des Bauteils Details kann ich die Abfrage params erhalten wie:

export class DetailsComponent implements OnInit { 

    constructor(public route: ActivatedRoute) { } 

    ngOnInit() { 
    console.log(this.route.params.value); 
    } 

}