Impossible de naviguer vers la route des enfants avec QueryParams par angular.Router.Navigater
Tout a essayé:
this.router.navigateByUrl('/desktop/search?q=folder'));
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
this.router.navigate(['desktop/search'], { queryParams: {q: 'folder'} });
mes itinéraires:
{
path: 'desktop',
component: FavoritesPageComponent,
children: [
{ path: 'desktop-admin', component: DesktopAdminComponent },
{ path: 'favorites', component: FavoritesBodyMainComponent },
{ path: 'sessions', component: SessionsComponent },
{ path: 'search', component: FavoritesBodySearchComponent },
{ path: 'shared_with_me', component: FavoritesBodySharedComponent },
{ path: 'recycle', component: FavoritesBodyRecycleComponent }
]
}
lorsque j'essaie de naviguer vers 'bureau/rechercher? q = dossier' J'ai l'erreur suivante:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'desktop/search%3Bq%3D%25D0%25BF%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0'
Qu'est-ce qui ne va pas? Y a-t-il un moyen d'utiliser des itinéraires enfants avec des paramètres de query normaux comme
.../desktop/search?q=folder
this.route.queryParams.subscribe(params => {
console.log('params['q']: ', params['q']);
});
Regardez cet exemple:
1- Déclaration des paramètres de route:
// app.routing.ts
export const routes: Routes = [
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];
pour voir la page Détails du produit pour le produit avec ID 10, vous devez utiliser l'URL suivante:
localhost:4200/product-details/10 // it's not this -> /product-details?id:10
2- Liaison aux itinéraires avec les paramètres:
<a [routerLink]="['/product-details', 10 or variable name]">
title
</a>
ou
<a (click)="goToProductDetails($event,10)">
title
</a>
// into component.ts
goToProductDetails(e,id) {
e.preventDefault();
this.router.navigate(['/product-details', id]);
}
3- Paramètres de la route de lecture:
// into component.ts
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = +params['id'];
});
}
J'espère que ceci vous aide.
Sry, tout fonctionne bien. C'était ma typo dans le code .. :) Donc, voici la bonne façon d'utiliser QueryParams:
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
Je ne veux pas utiliser urlparams, car j'aurai beaucoup de paramètres sur cette page et l'URL comme:
.../foo/bar/foo1/bar1/foo2/bar2/.../foo-x/bar-x
ne regardera pas la beauté. Thnx tout pour l'aide