Nie można dopasować żadnych tras: z Query Params - kątowy, router

Próbuję nazwać trasę z opcjonalnym parametrem.

Mój 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 }

]
},
];

Jak to nazywam

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

Błąd: Nie można dopasować żadnych tras: „bo / history / details; id = myIdValue”

Ale działa, jeśli zdefiniuję go w routerze ukośnikiem i wywołam go, ręcznie wstawiając adres URL:

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

Nawet jeśli dodam „;” zamiast „/” w routerze nie działa. Chcę zadzwonić do trasy za pomocą funkcji router.navigate!

Odpowiedzi:

0 dla odpowiedzi № 1

W porządku, więc wygląda na to, że zrobiłem wielkie zamieszanie.

Chciałem uzyskać dostęp do trasy za pomocą parametrów zapytania, ale bez ukośnika, więc rozwiązaniem jest:

Trasa:

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

Połączenie:

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

/: id nie ma tutaj, ponieważ parametry zapytania nie powinny być poprzedzone ukośnikiem i są opcjonalne. Utworzona trasa to / bo / history / details; id = myVarIDContents

A w komponencie szczegółów mogę uzyskać parametry zapytania jako:

export class DetailsComponent implements OnInit {

constructor(public route: ActivatedRoute)  { }

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

}

---

-1 dla odpowiedzi № 2

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

zmień na,

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

i nazwać to tak,

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

---