多个路由器出口，命名为路由器出口不起作用

Question

我正在尝试让多个路由器出口在同一路径上使用不同的组件，但是，以下代码不起作用。

路线：

const routes: Routes = [
{ path: 'products', component: ProductComponent},
{ path: 'products', component: ProductHeaderComponent, outlet: 'header-route' },
{ path: 'products', component: ProductFooterComponent, outlet: 'footer-route' }
];

目录：

<router-outlet></router-outlet>//Primary Outlet
<router-outlet name="header-route"></router-outlet>
<router-outlet name="footer-route"></router-outlet>

主插座工作。

命名插座、页眉路由和页脚路由不起作用。

Answer 1

您可以使用多个路由器插座并使用（插座名称：路由）访问辅助路由器URL，例如：

localhost:4200/loginpage(header-route: products)

现场示例：堆栈闪电战