Angular - routing перезаписать URL

#angular #url-rewriting #routing #url-redirection

#angular #url-перезапись #маршруты #перенаправление

Вопрос:

У меня проблема, которая кажется простой, но я много искал решение, но не смог его найти, тем более, что многое изменилось со времен Angular2.

У меня есть несколько специальных страниц

 /page/1

представляет страницу о воде

 /page/2

представляет страницу о пожаре.

Другие страницы являются «нормальными», например

 /contact
/about

…

В RouterModule у меня есть:

 RouterModule.forRoot([      
  {
      path: 'page/:id',
      component: PageComponent     
  },
  {
      path: 'contact',
      component: ContactComponent     
  },

Таким образом, содержимое Water и Fire генерируется в PageComponent в зависимости от идентификатора 1 или 2 соответственно. (У меня есть другие динамические данные, а не только вода и огонь)

Теперь я хочу, когда пользователь вводит

 /water

чтобы увидеть содержимое (без изменения URL!), чтобы

 /page/1

Итак, у меня есть перенаправление из-за отсутствия лучшего решения:

 { path: 'water', redirectTo: 'page/1', pathMatch: 'full' },
{ path: 'fire', redirectTo: 'page/2', pathMatch: 'full' } ...

Но это приводит к изменению URL. Но я хочу, чтобы пользователь вводил

 /water

Я хочу, чтобы URL оставался таким, а не перенаправлением! (То же самое касается / fire и других страниц динамического содержимого.)

1. Может быть, просто избавиться от /pages/:id маршрутов и иметь { path: 'water', component: PageComponent } ?

2. Тогда как мне передать ему идентификатор?

3. О, вы имеете в виду, я прочитал окончание URL? Я никогда не думал об этом, но разве это не «обман»? Нет ли более стандартного, углового, способа?

4. Почему чтение параметров маршрута и изменение представления соответственно будет «мошенничеством»? ActivatedRoute.params (или paramMap ) есть причина.

5. Можете ли вы помочь мне, как прочитать параметры маршрута? И как установить их в первую очередь в моем примере? Пожалуйста, ответьте в ответе.

Ответ №1:

Как насчет этого:

 RouterModule.forRoot([      
  {
    path: 'page/:id',
    component: PageComponent     
  },
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent,
    data: {id: 1}
  },
  {
    path: 'fire',
    component: PageComponent,
    data: {id: 2}
  }

https://angular.io/guide/router

Вам придется немного изменить свой PageComponent, чтобы проверить, есть ли идентификатор в наблюдаемых данных или идентификатор исходит из URL-адреса.

Ответ №2:

Частично основываясь на ответе мбойко (поскольку проверка идентификатора в наблюдаемых данных, как предположил ариэль Джуд, была для меня слишком сложной), я принял следующее решение:

 RouterModule.forRoot([      
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent
  },
  {
    path: 'fire',
    component: PageComponent
  }

а затем в компоненте страницы:

 import { Location } from '@angular/common';

…

 constructor(
        private location: Location,

…

 private mapPathToId(path: string): number {
    switch (path) {
        case '/water':
            return 1;
        case '/fire':
            return 2;
        ...
    }        
}

ngOnInit(): void {
    const id = this.mapPathToId(this.location.path());
    this.showContent(id);          
}