【发布时间】:2017-10-31 02:35:16
【问题描述】:
我有一个菜单(主导航图像)并且由于不同的页面布局(所有“站点”都是全宽的)链接有不同的父级:
- 首页 - /home
- 景点 - /site/attraction
- 动物 - /site/animals
- 跟踪订单 - /order/order-tracking
- 上传订单 - /site/upload-order
- 已保存的篮子 - /basket/stored-basket
- 2017 年下载 - /site/downloads
- 关于我们 - /site/about-us
- 联系方式 - /site/contact
如果从“站点”转到“订单”父视图,则路线有效,但是当我将“站点”转到“站点”时出现错误,这是预期的,因为站点已激活,因此不高兴。
我已经阅读了有关父母和孩子的信息,并为每个功能创建了一个路由和模块,我将所有“站点”路由分成了他们自己的部分,尽管“错误:无法激活已激活的插座”,但我得到了同样的错误
如果我在设置时出错,我会再次尝试将这个过程分成单独的路由模块,但是我想检查一下:
如果我正确使用“父/子”,即由于布局不同而在主导航中混合父链接和子链接,站点是“页面”吗?我找不到这样做的任何其他导航示例。
app.component.html
<router-outlet></router-outlet>
site.component.html
<app-nav></app-nav>
<div class="container main-content">
<div class="row">
<div class="col-12">
<router-outlet name="tertiary"></router-outlet>
</div>
</div>
</div>
<app-footer></app-footer>
app.routes.ts(每个项目一个路由)
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{
path: 'login',
outlet: 'primary',
component: LoginComponent,
},
{
path: 'register',
outlet: 'primary',
component: RegisterComponent,
},
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
}
]
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
outlet: 'primary',
component: CatalogueComponent,
},
{
path: '',
outlet: 'sidebar',
component: CatalogueNavComponent,
},
{
path: 'products',
outlet: 'primary',
component: ProductsListComponent,
},
{
path: 'products/category/:cat',
outlet: 'primary',
component: ProductsListComponent,
},
{
path: 'products/detail/:code',
outlet: 'primary',
component: ProductdetailComponent,
},
{
path: 'products/search/:variables',
outlet: 'primary',
component: SearchProductsComponent,
}
]
},
{
path: 'basket',
component: BasketComponent,
canActivate: [AuthGuard],
children: [
{
path: 'basket-detail',
children: [
{
path: '',
outlet: 'primary',
component: BasketdetailComponent,
},
{
path: '',
outlet: 'sidebar',
component: BasketTotalComponent,
},
],
},
{
path: 'checkout',
children: [
{
path: '',
outlet: 'primary',
component: CheckoutComponent,
},
{
path: '',
outlet: 'sidebar',
component: AddressComponent,
},
],
},
{
path: 'stored-basket',
children: [
{
path: '',
outlet: 'primary',
component: StoredBasketComponent,
},
{
path: '',
outlet: 'sidebar',
component: SearchBasketTemplatesComponent,
},
],
},
{
path: 'stored-basket-detail/:basketId',
children: [
{
path: '',
outlet: 'primary',
component: StoredBasketDetailComponent,
},
{
path: '',
outlet: 'sidebar',
component: StoredBasketDetailSummaryComponent,
},
],
},
{
path: 'your-account',
children: [
{
path: '',
outlet: 'primary',
component: YourAccountComponent,
},
{
path: '',
outlet: 'sidebar',
component: AddressComponent,
},
],
},
]
},
{
path: 'order',
component: BasketComponent,
canActivate: [AuthGuard],
children: [
{
path: 'order-tracking',
children: [
{
path: '',
outlet: 'primary',
component: OrderTrackingComponent,
},
{
path: '',
outlet: 'sidebar',
component: SearchOrderTrackingComponent,
},
],
},
{
path: 'order-tracking-detail/:orderNo',
children: [
{
path: '',
outlet: 'primary',
component: OrderTrackingDetailComponent,
},
{
path: '',
outlet: 'sidebar',
component: OrderTrackingDetailAddressComponent,
},
]
}
]
},
{
path: 'site',
component: SiteComponent,
children: [
{
path: 'contact',
children: [
{
path: '',
outlet: 'tertiary',
component: ContactComponent,
},
],
},
{
path: 'upload-order',
children: [
{
path: '',
outlet: 'tertiary',
component: UploadOrderComponent,
},
],
},
{
path: 'about-us',
children: [
{
path: '',
outlet: 'tertiary',
component: AboutComponent,
},
],
},
{
path: 'attraction',
children: [
{
path: '',
outlet: 'tertiary',
component: AttractionComponent,
},
],
},
{
path: 'animals',
children: [
{
path: '',
outlet: 'tertiary',
component: AnimalsComponent,
},
],
},
{
path: 'downloads',
children: [
{
path: '',
outlet: 'tertiary',
component: DownloadsComponent,
},
],
},
{
path: 'order-tracking-pdf/:orderNo',
children: [
{
path: '',
outlet: 'tertiary',
component: OrderTrackingPdfComponent,
},
],
},
{
path: 'order-confirmation/:orderNo',
children: [
{
path: '',
outlet: 'tertiary',
component: OrderConfirmationComponent,
},
],
},
{
path: 'account-summary-pdf',
children: [
{
path: '',
outlet: 'tertiary',
component: AccountSummaryPdfComponent,
},
],
},
],
},
{
path: '',
canActivate: [AuthGuard],
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: 'home'
}
];
export const RoutingModule = RouterModule.forRoot(routes, {
});
【问题讨论】:
-
你能发布你的路线定义吗?