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

Question

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

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%20Token, который будет преобразован в http://localhost:4200/blog/Add%20Token. Из-за этого я не могу получить значение параметра запроса p. Как я могу создать маршрут, который будет работать для p=% и как я могу получить значение p?

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

Answer 1

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

Сначала мне пришлось удалить маршрут { 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%20Token, будет достигнут маршрут p, и запрос будет перенаправлен в компонент PageNotFound.В компоненте сам я решаю, что будет дальше.Значение переменной id будет blog/Add%20Token.

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

Answer 2

для меня единственное место, где это на самом деле сработает, это сам домашний маршрут.'' и '**' - это просто 'перенаправления на домашний компонент

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

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

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

}