Angular 8路由器不渲染各种组件

问题描述 投票:0回答:1

我正在构建一个CRUD应用程序,我想按对象类型分隔各个组件的路由。第一系列路线可以完美运行。但是,第三,第四,第五和第六路径无法渲染各种子路径。

这是我的路线数组:

const routes = [
  { 
    path: '',
    children: [
      { 
        path: 'obj-type1',
        children: [
          { path: 'all', component: ViewObjType1Component },
          { path: 'new', component: CreateObjType1Component },
          { path: ':id', component: ViewObjType1Component },
          { path: ':id/manage', component: ManageObjType1Component },
          // * { path: ':id/obj-type2', component: ViewObjType2ByClientContractIDComponent },
          // * { path: ':id/obj-type3', component: ViewObjType3ByClientContractIDComponent },
          // * { path: ':id/obj-type4', component: ViewObjType4ByClientContractIDComponent },
          // * { path: ':id/obj-type5', component: ViewObjType5ByClientContractIDComponent },
          // * { path: ':id/obj-type6', component: ViewObjType6ByClientContractIDComponent },
        ]
      },
      {
        path: 'obj-type2',
        children: [
          { path: 'all', component: ViewObjType2Component },
          { path: 'new', component: AssignObjType2Component },
          { path: ':id', component: ViewObjType2Component },
          { path: ':id/manage', component: ManageObjType2Component }
        ]
      },
      {
        path: 'obj-type3',
        children: [
          { path: 'all', component: ViewObjType3Component },
          { path: ':id', component: ViewObjType3Component },
        ]
      },
      {
        path: 'ObjType4',
        children: [
          // ** { path: 'all', ViewObjType4Component },
          // ** { path: 'new', GenerateObjType4Component },
          // ** { path: ':id', ViewObjType4Component },
          { path: ':id/manage', component: ManageObjType4Component },
        ]
      },
      {
        path: 'obj-type5',
        children: [
          // ** { path: 'all', ViewObjType5Component },
          // ** { path: 'new', CreateObjType5Component },
          // ** { path: ':id', ViewObjType5Component },
          { path: ':id/manage', component: ManageObjType5Component },
        ]
      },
      {
        path: 'obj-type6',
        children: [
          // ** { path: 'all', ViewObjType6Component },
          // ** { path: 'new', GenerateObjType6Component },
          // ** { path: ':id', ViewObjType6Component },
          { path: ':id/manage', component: ManageObjType6Component },
        ]
      }
    ]
  }
];

我的app.routing.ts文件包含对上面列出的功能模块的引用:

        {
            path: 'feature-module',
            loadChildren: './feature_modules/feature-module/feature-module.module#FeatureModule'
        },

标记为“ // * {}”的路由会破坏整个路由器。

标记为“ ?? ** {}”的路由不会破坏任何内容,但也不会渲染任何组件。

我不确定为什么会这样。我尝试过重新排列阵列中的路线。也许我需要一个附加到每个/ obj-typeN路由的布局组件,其中包含一个渲染它的子组件?

angular angular8 angular-router
1个回答
0
投票

这是一个非常简单的错误。我忘了在引用有问题的路由的组件之前写“ component:”。答案是改变:

© www.soinside.com 2019 - 2024. All rights reserved.