Список queryParams пуст в Angular 5 маршрутизации

Question

Я новичок в Angular, и я искал решение своей проблемы, но, к сожалению, я не нашел этого. Когда я передаю параметры в маршрутизатор (класс Router), но список параметров (на целевом сайте) пуст.

let navigationExtras: NavigationExtras ={
  queryParams: {
    uri: item.uri
  }
}

this.router.navigateByUrl('articlelist/article-details', navigationExtras);

Компонент с деталями статьи (маршрут - класс ActivatedRoute):

   ngOnInit(): void {
        console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
    this.route.queryParamMap.map(paramMap =>{
            this.uri = paramMap.get('uri');
            console.log(this.uri);
        });
    }

Маршрутизация в модуле ArticleList (один из модулей в моем проекте):

const routes: Routes = [{
  path: '',
  component: ArticleListComponent,
    data: {
      title: 'ArticleList'
    },
  },
{
  path: 'article-details',
  component: ArticleDetailsComponent,
  data: {
    title: 'ArticleDetails'
  },
}
];

Когда я зарегистрировал route.url в целевом компоненте, результат был:

ArticleDetailsComponent { "_IsScalar": ложные, "наблюдатели": [], "закрыто" ложь "IsStopped" ложь "hasError" ложь "thrownError": нулевой, "_ значение": [{ "путь": "статья -details», "параметры": {}}]}

Если кто-нибудь знает, как это исправить, буду благодарен за помощь:)

Answer 1

Вам необходимо использовать ActivatedRoute, чтобы получить все параметры запроса.

Попробуйте это -

constructor(
    private activatedRoute: ActivatedRoute
  ) { }

this.activatedRoute.queryParams.subscribe(params => {
      const URI = params['uri'];
    });

Обновление

Попробуйте отправить такие параметры, как это -

this.router.navigate(['articlelist/article-details' ], {
      queryParams: {
        uri: item.uri || 'Default'
      }
    });

Answer 2

Вы можете определить параметр в вашем app.routing.module.ts:

{ path: 'examplePath/:id', component: YourComponent},

и отправь так:

this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)

Затем в конструкторе компонентов вы можете получить параметр (с помощью @ angular / router / ActivatedRoute):

this.activatedRoute.params.subscribe(params => {
    this.yourObject = params['id'];
}

Answer 3

Вместо того, чтобы полагаться на Observables, я бы посоветовал вам сделать снимок вашего маршрута. Это даст вам простой объект, содержащий ваши параметры.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  console.log(this.route.snapshot.queryParams);
}