Question

我很困惑这条路线有什么问题......

app.module.routing：

...
  {
    path: 'path1',
    canActivate: [Path1Guard],
    loadChildren: './path1/path1.module#Path1Module',
  },

path1.routing.module：

const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

据我了解，导航到/ path1应该在加载AuthenticatedLayoutComponent时生成，然后在AuthenticatedLayoutComponent的路由器出口加载Path1Component。

如果我使路径更具体：

  const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: 'subpath1',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

...并导航到/ path1 / subpath1，这正是发生的事情。但是，如果没有子路径，布局组件会加载但在路由器插座中不会加载任何内容。那么我拥有它的方式有什么问题？感谢。

Answer 1

我相信如果你设置这样的配置

，你的问题就会解决

const path1Routes: Routes = [
  {
     path: 'path1',
     component: AuthenticatedLayoutComponent,
     children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

如果要实例化组件而不需要定义新的URL路由，则使用空路径。

如果你将两者都留空，那么可能只是尝试解决第一个问题。

通过设置上面的配置，它将识别您在延迟加载之前定义的路径，然后它将加载子组件，因为它将匹配空路径

Answer 2

您需要做的就是删除pathMatch：'full'

角度5路由 - 空路径不匹配

2 个答案: