角形布线和放置路由器插座

时间:2019-04-06 19:18:43

标签: angular routing router-outlet

如何放置用于子路由的路由器出口,而又不影响主路由器出口

我的父母组件显示在主路由器插座中。我在一个包含子路由的组件中有一个导航,它的子组件将插入该父组件。但是当我导航到另一个父组件时,在该父组件中定义的链接不起作用。这是我遇到的问题,想解决。

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>

当我尝试移动到其他父组件时,该父组件中的链接不起作用。

0 个答案:

没有答案