【问题标题】:Angular2+ Top Level Navigation Containing Parents and Children - activated route error包含父母和孩子的Angular 2顶级导航 - 激活路由错误
【发布时间】:2017-10-31 02:35:16
【问题描述】:

Main Navigation Image

我有一个菜单(主导航图像)并且由于不同的页面布局(所有“站点”都是全宽的)链接有不同的父级:

  1. 首页 - /home
  2. 景点 - /site/attraction
  3. 动物 - /site/animals
  4. 跟踪订单 - /order/order-tracking
  5. 上传订单 - /site/upload-order
  6. 已保存的篮子 - /basket/stored-basket
  7. 2017 年下载 - /site/downloads
  8. 关于我们 - /site/about-us
  9. 联系方式 - /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, {

});

【问题讨论】:

  • 你能发布你的路线定义吗?

标签: angular angular-routing


【解决方案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'

【讨论】:

  • @playboxdesign 你也可以在你的第三级辅助路由器插座旁边添加一个虚拟的&lt;router-outlet&gt;&lt;router-outlet&gt;,它基本上不会被使用,但我只是为了清洁而使用主要的。
猜你喜欢
  • 2021-01-13
  • 1970-01-01
  • 1970-01-01
  • 2017-07-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多