Angular Router.navigate для дочернего маршрута с queryParams - PullRequest
Новая
       27

Angular Router.navigate для дочернего маршрута с queryParams

1 голос
/ 25 марта 2019

Невозможно перейти к дочернему маршруту с queryParams от Angular.Router.navigate

Уже пробовал: 

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

Ответы [ 3 ]

0 голосов
/ 25 марта 2019

Посмотрите на этот пример:

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

для просмотра страницы сведений о продукте с идентификатором 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']; 
    });
  }

Надеюсь, это поможет вам.

0 голосов
/ 25 марта 2019

извините, все отлично работает. Это была моя опечатка в коде .. :) Итак, вот правильный способ использовать queryParams: 

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

Я не хочу использовать UrlParams, потому что у меня будет много параметров на этой странице и URL, например: 

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

не будет выглядеть красиво. Спасибо всем за помощь

0 голосов
/ 25 марта 2019

параметры маршрутизатора в угловых значениях разделены символом ';' не '&'. Вы должны определить маршрут с параметром: 

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

тогда вы можете использовать этот пример для навигации: 

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

Как вы видите, у router.navigate есть один параметр и его объект: 

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

Проверьте это для более подробной информации

...