Question

我正在构建一个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路线上附加一个包含的布局组件来呈现其子级？

Answer 1

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

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

到

{
        path: 'ObjType4',
        children: [
          // ** { path: 'all', component: ViewObjType4Component },
          // ** { path: 'new', component: GenerateObjType4Component },
          // ** { path: ':id', component: ViewObjType4Component },
          { path: ':id/manage', component: ManageObjType4Component },
        ]
      },
      {
        path: 'obj-type5',
        children: [
          // ** { path: 'all', component: ViewObjType5Component },
          // ** { path: 'new', component: CreateObjType5Component },
          // ** { path: ':id', component: ViewObjType5Component },
          { path: ':id/manage', component: ManageObjType5Component },
        ]
      },
      {
        path: 'obj-type6',
        children: [
          // ** { path: 'all', component: ViewObjType6Component },
          // ** { path: 'new', component: GenerateObjType6Component },
          // ** { path: ':id', component: ViewObjType6Component },
          { path: ':id/manage', component: ManageObjType6Component },
        ]
      }

此解决方案解决了所有错误。

Angular 8路由器无法渲染各种组件

1 个答案: