Question

我有以下结构的angular 4项目：

<form id='ui' onclick="out.value = txt.value;">

  <output id='out' for='txt'></output>

  <input id='txt' type='text'>

  <button type='submit'>GO</button>

</form>

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

在home.module.ts中，子溃败已使用{ path: "home", component: HomeComponent, children: [ { path: '', pathMatch: 'full', component: HomeStatsComponent }, { path: 'products', children: [ { path: '', pathMatch: 'full', component: ProductsComponent } { path: 'add', component: AddProductComponent } ] }, ] }导入。在home.component.html中有一个用于子路由的路由器出口。除默认子路由（RouterModule.forChild(HomeRoutes)）以外的所有路由都可以成功运行（http://localhost:4200/home可以正常运行）。 http://localhost:4200/home/products不会给出任何错误，因为路由器出口为空，它仅显示空白。但是，如果我在http://localhost:4200/home中定义了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.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 {
}

然后在HomeRoutingModule处导入home.module.ts。

Angular 4默认子路由不起作用

2 个答案: