Angular 4 个默认子路由不工作

Question

我有 angular 4 个项目，结构如下：

src
|- app
|  |- home
|  |  |- home.component.ts/html/scss
|  |  |- home.module.ts
|  |  |- home.routing.ts
|  |  |- products
|  |  |  |- products.component.ts/html/scss
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

我的 app.routing.module.ts 文件包含以下内容：

const routes: Route[] = [
{
    path: "home", component: HomeComponent, canActivate: [AppAuthGuard]
  },
  {
    path: '', redirectTo: AppConstants.ROUTE_LOGIN, pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

和 home.routing.ts 包含以下子路径：

{
path: "home",
component: HomeComponent,
children: [
  {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
 ]
}

在 home.module.ts 中，子路由已使用 RouterModule.forChild(HomeRoutes) 导入。 home.component.html 中的子路由有一个路由器出口。除了默认子路由 (http://localhost:4200/home) 之外的所有路由都成功运行 (http://localhost:4200/home/products 工作正常)。 http://localhost:4200/home 没有报错，只是显示空白 space 因为路由器插座是空的。但是，如果我在 app.module.ts 中定义 home 组件的默认子路由，它就可以正常工作。我做错了什么导致它不起作用？

Answer 1

能不能直接把一级配置去掉试试。由于你已经路由到home，它正在/home路由中找到/home，所以根据配置它变成了http://localhost:4200/home/home

 [ 
   {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  }
]

Answer 2

我通过 loadChildren 的延迟加载语法解决了这个问题。并删除第一级配置。在此之前，我需要稍微重组代码以导出 home 路由模块并导入到 home 模块。更改后的文件如下：

home.routing.ts:

const homeRoutes: Route[] = [
{
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
]
}
@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class HomeRoutingModule {}

然后app.routing.module.ts:

const routes: Route[] = [
{
    path: "home", component: HomeComponent,  loadChildren: './home/home.module#HomeModule'
  },
  {
    path: '', redirectTo: "login", pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

并在 home.module.ts 导入 HomeRoutingModule。

Angular 4 个默认子路由不工作

Angular 4 default child route Not working

angular

angular-routing

angular4-router