Одновременное изменение двух независимых маршрутов - можно ли это сделать с помощью вспомогательной маршрутизации?

С помощью вспомогательной маршрутизации мы можем сделать две независимые маршрутизации в одном компоненте. Можем ли мы изменить независимые маршруты одновременно, используя ту же концепцию для одного URL?

Например:

  1. http://localhost:4200/listing для этого маршрута, я хочу загрузить компонент C1 против имени роутинга-выхода и перечисление компонента из моего основного маршрутизатора.

  2. http://localhost:4200/listings для этого маршрута, я хочу загрузить компонент C2 по имени routing-outlet и компонент списков из моего основного маршрутизатора.

    const appRoutes: Routes = [
    { path: '', component: HeroComponent, outlet: 'hero', children: [
    { path: 'listings', component: C2Component},
    { path: 'listing', component: C1Component},]},

    { path: '', component: ContentComponent, children: [
    { path: '', component: HomeComponent},
    { path: 'listings', component: ListingsComponent},
    { path: 'listing', component: ListingComponent},
    { path: 'sellers', component: SellersComponent},
    { path: 'seller', component: SellerComponent}]}];

angular angular9 routing
person Abdul Samad    schedule 07.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это

    { path: 'listing', component: C1Component, outlet:'hero'},
    { path: 'listing', component: ListingComponent},
    { path: 'listings', component: C2Component, outlet:'hero'},
    { path: 'listings', component: ListingsComponent},

В соответствии с маршрутизацией один и тот же маршрут имеет две конфигурации, поэтому розетка с именем hero получит C1Component, а основная розетка маршрутизатора получит Listing Component.

const appRoutes: Routes = [
    { path: '', component: HeroComponent, outlet: 'hero'},

    { path: 'listing', component: C1Component, outlet:'hero'},
    { path: 'listing', component: ListingComponent},
    { path: 'listings', component: C2Component, outlet:'hero'},
    { path: 'listings', component: ListingsComponent},

    { path: '', component: ContentComponent, children: [
    { path: '', component: HomeComponent} 
    { path: 'sellers', component: SellersComponent},
    { path: 'seller', component: SellerComponent}]
}];
person Hitech Hitesh    schedule 07.04.2020