Angular 4 по умолчанию дочерний маршрут не работает - PullRequest
Новая
       19

Angular 4 по умолчанию дочерний маршрут не работает

0 голосов
/ 04 января 2019

У меня угловой 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 не выдает ошибок, просто показывает пустое пространство, потому что розетка маршрутизатора пуста. Но если я определяю дочерний маршрут по умолчанию домашнего компонента в app.module.ts, он работает нормально. Что я сделал не так, чтобы он не работал?

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Я исправляю проблему с помощью ленивого синтаксиса загрузки, 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.

0 голосов
/ 04 января 2019

Можете ли вы попробовать, удалив конфигурацию первого уровня напрямую, как. Поскольку вы уже перенаправили его на 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
      }
    ]
  }
]
...