Question

我正在一个页面中工作，该页面具有两个用于数据路由的输出。问题在于，路由生效后，路由类似于（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"
},
  ];

它按预期工作，因此用户转到酒店，并将其重定向到/ Hotel（form：hotel）

我现在想知道的是，是否可以防止在URL上更改URL，所以它保持为/ Hotel。

谢谢。安德烈斯（Andrés）

Answer 1

所以，我这样解决了它：

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;

             } 
        }
    });

隐藏命名oulet的URL

1 个答案: