Angular Router.navigate 使用 queryParams 导航到子路由答案

【问题标题】：Angular Router.navigate to child route with queryParamsAngular Router.navigate 使用 queryParams 导航到子路由
【发布时间】：2019-08-15 10:41:06
【问题描述】：

无法使用 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 } 
    ] 
}

当我尝试导航到“桌面/搜索？q=文件夹”时，出现以下错误：

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']);
});

【问题讨论】：

试试this.router.navigate(['search'], { queryParams: {q: 'folder'} });
代码this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} }); 应该可以工作。如果没有，请检查日志是否有任何错误或使用 stackblitz 上的示例重现错误
set /:id in path{ path: 'search/:id', component: FavoritesBodySearchComponent },
angular.io/guide/router#query-parameters-and-fragments

标签： angular router angular-router angular-router-params

【解决方案1】：

看这个例子：

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']; 
    });
  }

希望对你有帮助。

【讨论】：

【解决方案2】：

对不起，一切正常。这是我在代码中的错字.. :) 所以，这里是使用 queryParams 的正确方法：

this.router.navigate(['desktop', 'search'], { queryParams: {q: 'folder'} });

我不想使用 UrlParams，因为我将在此页面上有很多参数和 url，例如：

.../foo/bar/foo1/bar1/foo2/bar2/.../foo-x/bar-x

不会看起来很漂亮。谢谢大家的帮助

【讨论】：

【解决方案3】：

角度中的路由器参数由';'分隔不是 '＆'。您必须使用参数定义路由：

{ path: 'hero/:id', component: HeroDetailComponent }

那么你可以使用这个例子来导航：

this.router.navigate(['/heroes', { id: heroId }]);

你可以看到 router.navigate 有一个参数和它的对象：

['/heroes', { id: heroId }]

Check this for more details

【讨论】：