Блог

Главная - Вопросы по программированию - Определение углового маршрута для параметра запроса get

Определение углового маршрута для параметра запроса get

#angular #angular7

#угловой #angular7

Вопрос:

Я ищу определение маршрута, которое должно соответствовать любому запросу, подобному ?p= some%random query . Мое текущее определение маршрутов:

 const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'blog/:title', component: BlogComponent },
{ path: '**', pathMatch: 'full', component: HomeComponent },];

Моя идея заключалась в том, чтобы получить параметр запроса p с { path: '**', pathMatch: 'full', component: HomeComponent } помощью и

  ngOnInit() {
     let id = this.route.snapshot.paramMap.get('p');
 }

. Но, похоже, angular поддерживает запросы только со структурой /: a /:b. Например, запрос http://localhost:4200?p=yoyoyo будет преобразован в http://localhost:4200/yoyoyo . Тот же результат для http://localhost:4200/?p=/blog/Add Token которого будет преобразован в http://localhost:4200/blog/Add Token . Из-за этого я не могу восстановить значение параметра запроса p . Как я могу создать маршрут, который будет работать для p=% и как я могу восстановить значение p ?

Может ли это быть достигнуто путем перехвата процесса маршрутизации?

Ответ №1:

для меня единственное место, где это действительно сработало бы, — это сам домашний маршрут. «и «**» являются просто перенаправлениями на домашний компонент

 const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'blog/:title', component: BlogComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'home' },];

в homecomponent вам нужно подписаться, чтобы получать изменения

 constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.route.queryParams.subscribe(value => console.log(value) )

}

Комментарии:

1. Это то, чем я сейчас занимаюсь. Есть ли у вас решение для автоматического преобразования http://localhost:4200/?p=/blog/Add Token в http://localhost:4200/blog/Add Token ?

2. Я протестировал это здесь, для меня это работает. Я попробовал http://localhost:4200/nonexisting?p=value , и он перенаправляет на «home» с доступными параметрами запроса. Я просто дважды проверил тот же маршрут, но ничего http://localhost:4200/?p=value не работает

3. действительно убедитесь, что вы используете метод subscribe , форма let id = this.route.snapshot.paramMap.get(‘p’); не работает. Короче говоря: у меня нет этой проблемы с автоматическим преобразованием.

4. Я внес изменения в ответ, чтобы иметь точную копию моей конфигурации в соотношении 1: 1 для маршрутов, которые имеют значение. не могли бы вы, пожалуйста, попробовать с этим.

5. Что я имел в виду под преобразованием, так это то, что URL записывается с http://localhost:4200/?p=value на localhost:4200 / home . То же самое относится к, http://localhost:4200/blog/Add Token который перенаправляет на http://localhost:4200/blog/Add Token и удаляет параметр p. Для меня обратный вызов queryParams выводит только [object], который является пустым прототипом без дополнительной информации.

Ответ №2:

Для меня сработала следующая настройка.

Во-первых, мне пришлось удалить маршрут { path: '', redirectTo: '/home', pathMatch: 'full' }, .

Затем я создал следующий маршрут (и компонент PageNotFound) для обработки параметра p { path: ':p', component: PageNotFoundComponent }, .

В PageNotFoundComponent мне удалось получить p параметр с его значением. В зависимости от его значения я выбираю следующий маршрут. 

 ngOnInit() {
 let id = this.route.snapshot.paramMap.get('p');
 if (id == null) {
  this.Link = "/home";
 }
 else {
  this.Link = "/"   this.route.snapshot.paramMap.get('p');
 }
 this.router.navigate([this.Link]);
}

Если кто-то перейдет на страницу, то http://localhost:4200/?p=/blog/Add Token маршрут p будет изменен, и запрос будет перенаправлен на компонент PageNotFound. В самом компоненте я решаю, что происходит дальше. Значение переменной id было бы blog/Add Token .

[ПРАВИТЬ] Я успешно использую это решение для обработки перенаправлений githubpage в сочетании с этим404.html страница и приложение angular.