Скрыть URL для именованных аутлетов - PullRequest
Новая
       0

Скрыть URL для именованных аутлетов

0 голосов
/ 22 января 2019

Я работаю на странице, имеющей два выхода для маршрута данных.Проблема в том, что после того, как он заработал, маршрут выглядит примерно так (Routename: value).

Так что в моем случае я хочу, чтобы при переходе пользователя к / Fligth оба маршрута получали значение «Fligth»и поэтому оба отображают соответствующий компонент.

У меня есть эта опция: 

const appRoutes: Routes = [


{
  path: "groups", 
  component: HomeComponent,
    children:[
  { 
    path: "", 
    redirectTo:"/groups(form:groups)",
    pathMatch:'prefix'
  },
  ] 
},

{
  path: "groups",
  component: GroupRequestFormComponent, 
  outlet:"form"
},

{
  path: "flight",  
  component: HomeComponent,
  children:[
  { 
    path: "", 
    redirectTo:"/flight(form:flight)",
    pathMatch:'prefix'
  },
  ] 
},
{ 
  path: "flight",
  component: flightsSearchFormComponent,
  outlet:"form"
},

{
  path: "hotel",  
  component: HomeComponent,
    children:[
  { 
    path: "", 
    redirectTo:"/hotel(form:hotel)",
    pathMatch:'prefix'
  },
  ] 
},
{
  path: "hotel",
  component: HotelSearchFormApiComponent, 
  outlet:"form"
},



{ 
  path: 'hotel/rate',      
  component:  RatesComponent 
},
{ 
  path: 'hotel/:countryCod/:stateCod/:cityCod/:dateFrom/:dateTo', 
  component:  SearchHotelResultComponent 
},
{
  path: "**",  
  redirectTo:"hotel"
},
  ];

она работает как положено, поэтому пользователь переходит в отель и перенаправляется в / отель (форма: гостиница)

Теперь я хочу знать, могу ли я запретить изменение URL-адреса в URL-адресе, поэтому оставьте его как /Hotel.

Спасибо.Андрес

1 Ответ

0 голосов
/ 22 января 2019

Итак, я решил это так:

APP.COMPONENT.TS Конструктор 

this.router.events.subscribe(routerEvent => {
        if (routerEvent instanceof NavigationStart) {
            switch (routerEvent.url) {
                case "/hotel":
                    this.router.navigate([{ outlets: {primary: 'hotel',form: 'hotel' } }], {skipLocationChange: true})
                    break;
                case "/flight":
                    this.router.navigate([{ outlets: {primary: 'flight',form: 'flight' } }], {skipLocationChange: true})
                    break;
                case "/groups":
                    this.router.navigate([{ outlets: {primary: 'groups',form: 'groups' } }], {skipLocationChange: true})
                    break;

             } 
        }
    });
...