Question

我在其他路由器插座内使用不同名称的路由器插座。

{

[routerLink]='{ outlets: { "childRouter": ["one-way"] } }'>One Way

[routerLink]='{ outlets: { "childRouter": ["return"] } }'>Return

[routerLink]='{ outlets: { "childRouter": ["multicity"] } }'>Multicity

}

在我的路线中：

{ 
  path: 'flights', 
  component: FlightsComponent,
  data: { animation: 'flights' },
  children: [
     { path: 'one-way', component: FlightOneWayComponent, data: { animation: 'one-way' }, outlet: 'childRouter'},
     { path: 'return', component: FlightReturnComponent, data: { animation: 'return' }, outlet: 'childRouter'},
     { path: 'multicity', component: FlightMulticityComponent, data: { animation: 'multicity' }, outlet: 'childRouter'},
]},

我在主要组件中使用<router-outlet name="childRouter"></router-outlet>。

它正常工作，但它会生成类似/flights/(childRouter:one-way)的路径。

有没有办法改变flights/one-way而不是(childRouter:one-way)？

之类的路径

Answer 1

the technique you used is to implement a secondary route, you don't need it in your case

try this instead:

juste remove the outlet part from here

 { path: 'one-way', component: FlightOneWayComponent, data: { animation: 'one-way' }},
 { path: 'return', component: FlightReturnComponent, data: { animation: 'return' }},
 { path: 'multicity', component: FlightMulticityComponent, data: { animation: 'multicity' }},

and use this instead:

[routerLink]='["one-way"]'>One Way
[routerLink]='["return"]'>Return
[routerLink]='["multicity"]'>Multicity

路由器插座Angular 2中的路由器插座内部

1 个答案: