包含父母和子女的Angular2 +顶级导航 - 激活路线错误

Question

Main Navigation Image

我有一个菜单（主导航图片），由于页面布局不同（所有'网站'都是全宽）链接有不同的父母：

1. 主页 - / home
2. 景点 - /网站/景点
3. 动物 - / site / animals
4. 跟踪订单 - /订单/订单跟踪
5. 上传订单 - / site / upload-order
6. 已保存的篮子 - / basket / stored-basket
7. 2017年下载 - / site / downloads
8. 关于我们 - / site / about-us
9. 联系 - / site / contact

如果从“网站”转到“订单”父视图，路线会起作用，但是当我将“网站”变为“网站”时出现错误，因为网站被激活，因此不满意。

我已经阅读了有关父母和孩子的信息，并为每个功能创建了路由和模块，我将所有“网站”路由分成了他们自己的部分，但我得到了同样的错误，但是“错误：无法激活已激活的插座”< / p>

我会尝试将此过程再次分成单独的路由模块，以防我在设置时出错，但是，我想检查一下：

如果我正确使用'父/子'，即由于事实布局不同，在主导航中混合父子链接，Site是'Page'？我找不到任何其他导航示例。

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, {

});

Answer 1

我能够重现这个问题。看起来像angular需要你有一个主路由器插座才能拥有辅助路由器插座。我会从您的site.component.html

中删除路由器插座名称

// site.component.html
<app-nav></app-nav>
<div class="container main-content">
    <div class="row">
        <div class="col-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
<app-footer></app-footer>

并将网站路径定义更改为使用outlet: 'primary'