不显示子路由的Angular 5组件

时间:2018-04-25 09:42:12

标签: angular typescript angular2-routing angular-router

我有一系列嵌套组件

主要应用组件 - >产品 - >产品组

app-routing模块路由

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    loadChildren: './products/products-routing.module#ProductsRoutingModule',
    canActivate: [AuthenticationGuard],
    data: {
      breadcrumb: null,
      animation: 'products'
    }
  }
];

我的产品路线看起来像

const routes: Routes = [

  {
    path: '',
    component: ProductsOverviewComponent,
    data: {
      animation: 'overview',
      breadcrumb: 'Products',
    },
    canActivate: [ AuthenticationGuard ],
    children: [
      {
        path: 'products/:productId/grouping',
        loadChildren: '../grouping/grouping-routing.module#GroupingRoutingModule',
        data: {
          breadcrumb: null,
          animation: 'grouping'
        },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: 'create',
        component: ProductsComponent,
        data: {
          breadcrumb: 'Create',
          animation: 'create'
        },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: 'edit/:productId',
        component: QuoteOptionComponent,
        data: {
          breadcrumb: 'Edit',
          animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      }
    ]
  }
];

然后在我的产品分组模块中

const routes: Routes = [
  {
    path: '',
    component: OverviewComponent,
    canActivate: [ AuthenticationGuard ],
    data: {
      breadcrumb: 'Grouping',
      animation: 'grouping-overview',
    },
    children: [
      {
        path: 'create',
        component: CreateEditComponent,
        data: {
          breadcrumb: 'Create',
          animation: 'group-create'
        },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: {
          breadcrumb: 'Edit Group Info',
          animation: 'group-edit'
        },
        canActivate: [ AuthenticationGuard ]

    ]
  }
];

我的所有路由器链接都工作,url路径更新,路由器内的所有数据都被拉回到每个路由。我的问题是从不显示每个路由的组件。我在这里遗漏了什么或者如何让组件显示在主路由器插座中?

0 个答案:

没有答案