如何放置用于子路由的路由器出口,而又不影响主路由器出口
我的父母组件显示在主路由器插座中。我在一个包含子路由的组件中有一个导航,它的子组件将插入该父组件。但是当我导航到另一个父组件时,在该父组件中定义的链接不起作用。这是我遇到的问题,想解决。
RouterModule.forRoot([
{
component: HomeComponent,
// tslint:disable-next-line:quotemark
path: ""
},
{
component: RegisterComponent,
path: "Register"
},
{
component: ProductsComponent,
path: "Products"
},
{
component: ReceprionistProductsEditComponent,
path:"Receptionistproductedit"
},
{
component: ReceptionistProductsComponent,
path: "Receptionist",
children: [
{
component: MenSuitsFormComponent,
path: "suitform/:title"
},
{
path: "tightsform/:title",
component: TightsFormComponent
},
{
component: AccessoriesFormComponent,
path: "accessoriesform/:title"
}
]
},
{
path:'aaa',
component:TightsFormComponent,
outlet:"addProducts"
}
])
在“ ReceptionistProductComponent”中
<app-receptionist-navigation></app-receptionist-navigation>
<nav aria-label="breadcrumb" class="mt-5">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a [routerLink]="['/Receptionist/suitform',items[1]]">Shirts </a> </li>
<li class="breadcrumb-item"><a [routerLink]="['/Receptionist/tightsform',items[2]]">Trousers</a></li>
<li class="breadcrumb-item"><a [routerLink]="['/Receptionist/tightsform',items[3]]">Shorts</a></li>
<li class="breadcrumb-item"><a [routerLink]="['/Receptionist/suitform',items[4]]">Sarees</a></li>
<li class="breadcrumb-item"><a [routerLink]="['/Receptionist/accessoriesform','Accessories']">Accessories</a></li>
<li class="breadcrumb-item"><a [routerLink]="[{ outlets: { addProduts: ['/Receptionist/suitform',items[1]] }}]">Example</a></li>
<a [routerLink]="[{ outlets: { primary:['Receptionist'],addProducts: ['aaa'] }}]">Contact</a>
<a routerLink="/aaa">Contact1</a>
</ol>
</nav>
<router-outlet>/*This is a sub router outlet not the main one. Above child links are routed here*/</router-outlet>
当我尝试移动到其他父组件时,该父组件中的链接不起作用。