Angular Router.navigate 到带有 queryParams 的子路由
Angular Router.navigate to child route with queryParams
无法通过 Angular.Router.navigate
使用 queryParams 导航到子路由
А已经尝试过:
this.router.navigateByUrl('/desktop/search?q=folder'));
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
this.router.navigate(['desktop/search'], { queryParams: {q: 'folder'} });
我的路线:
{
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 }
]
}
当我尝试导航至 'desktop/search?q=folder' 时出现以下错误:
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'
怎么了?有没有办法使用带有正常查询参数的子路由,如
.../desktop/search?q=folder
this.route.queryParams.subscribe(params => {
console.log('params['q']: ', params['q']);
});
angular 中的路由器参数由“;”分隔不是 '&'。您必须使用参数定义路由:
{ path: 'hero/:id', component: HeroDetailComponent }
然后您可以使用此示例进行导航:
this.router.navigate(['/heroes', { id: heroId }]);
如您所见,router.navigate 有一个参数及其对象:
['/heroes', { id: heroId }]
看这个例子:
1-声明路由参数:
// app.routing.ts
export const routes: Routes = [
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];
要查看 ID 为 10 的产品的产品详细信息页面,您必须使用以下 URL:
localhost:4200/product-details/10 // it's not this -> /product-details?id:10
2- 链接到带有参数的路由:
<a [routerLink]="['/product-details', 10 or variable name]">
title
</a>
或
<a (click)="goToProductDetails($event,10)">
title
</a>
// into component.ts
goToProductDetails(e,id) {
e.preventDefault();
this.router.navigate(['/product-details', id]);
}
3-读取路由参数:
// into component.ts
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = +params['id'];
});
}
希望对你有所帮助。
对不起,一切正常。这是我在代码中的错字.. :)
所以,这里是使用 queryParams 的正确方法:
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
我不想使用 UrlParams,因为我会在这个页面上有很多参数,url 比如:
.../foo/bar/foo1/bar1/foo2/bar2/.../foo-x/bar-x
不会看美女。谢谢大家的帮助
无法通过 Angular.Router.navigate
使用 queryParams 导航到子路由А已经尝试过:
this.router.navigateByUrl('/desktop/search?q=folder'));
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
this.router.navigate(['desktop/search'], { queryParams: {q: 'folder'} });
我的路线:
{
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 }
]
}
当我尝试导航至 'desktop/search?q=folder' 时出现以下错误:
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'
怎么了?有没有办法使用带有正常查询参数的子路由,如
.../desktop/search?q=folder
this.route.queryParams.subscribe(params => {
console.log('params['q']: ', params['q']);
});
angular 中的路由器参数由“;”分隔不是 '&'。您必须使用参数定义路由:
{ path: 'hero/:id', component: HeroDetailComponent }
然后您可以使用此示例进行导航:
this.router.navigate(['/heroes', { id: heroId }]);
如您所见,router.navigate 有一个参数及其对象:
['/heroes', { id: heroId }]
看这个例子:
1-声明路由参数:
// app.routing.ts
export const routes: Routes = [
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];
要查看 ID 为 10 的产品的产品详细信息页面,您必须使用以下 URL:
localhost:4200/product-details/10 // it's not this -> /product-details?id:10
2- 链接到带有参数的路由:
<a [routerLink]="['/product-details', 10 or variable name]">
title
</a>
或
<a (click)="goToProductDetails($event,10)">
title
</a>
// into component.ts
goToProductDetails(e,id) {
e.preventDefault();
this.router.navigate(['/product-details', id]);
}
3-读取路由参数:
// into component.ts
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = +params['id'];
});
}
希望对你有所帮助。
对不起,一切正常。这是我在代码中的错字.. :) 所以,这里是使用 queryParams 的正确方法:
this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });
我不想使用 UrlParams,因为我会在这个页面上有很多参数,url 比如:
.../foo/bar/foo1/bar1/foo2/bar2/.../foo-x/bar-x
不会看美女。谢谢大家的帮助