Угловая - маршрутизация переписать URL

Question

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

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

/page/1

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

/page/2

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

Другие страницы "нормальны", как

/contact
/about

...

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

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

Таким образом, содержание воды и огня генерируется в 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 и других страниц с динамическим содержимым.)

Answer 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.

Answer 2

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

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

, а затем в 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);          
}