Angular 路由 - 在根路由级别激活默认子路由

Question

我在 Angular 5 应用程序中遇到此问题，其中子路由在应启用根路由的路由器出口处被激活。我希望读到这篇文章的人能够发现我的路线定义中的问题，而我在过去几天里一直未能发现这个问题。

我的 Angular 应用程序有 3 个嵌套路由级别。我在单独的模块中定义了路线。

在应用程序模块中，我将根路由定义为：

const mainRoutes: Route[] = [
    {
        path: '', redirectTo: 'mainApp', pathMatch: 'full'
    },
    {
        path: 'mainApp', canActivate: [AuthGuardService], component: TabbarComponent,
        children: [
            { path: 'home', canActivate: [AuthGuardService], component: HomeComponent },
            { path: 'books', canActivate: [AuthGuardService], loadChildren: () => BookshModule },
            { path: 'authors', canActivate: [AuthGuardService], loadChildren: () => AuthorsModule },
            { path: 'research-articles', canActivate: [AuthGuardService], loadChildren: () => ResArticlesModule },
        ]
    },
    {
        path: 'login', component: LoginComponent
    },    
    {
        path: '**', redirectTo: 'mainApp', pathMatch: 'full'
    }
];

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

对于 BooksModule（以及 AuthorsModule 和 ResArticlesModule），路线如下所示：

const bookroutes: Route[] = [
    {
        path: '', component: BooksComponent,
        children: [
            { path: 'fiction',  canActivate: [AuthGuardService], component: FictionComponent },
            { path: 'non-fiction',  canActivate: [AuthGuardService], component: NonFictionComponent },
            { path: 'autobiographies',  canActivate: [AuthGuardService], component: AutoBiographiesComponent }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(bookroutes)
    ],
    exports: [
        RouterModule
    ]
})

发生的情况是，当应用程序加载时，根路由器出口会在最顶部的路由器出口处加载 bookroute 的默认路由，我希望显示来自根路由的 mainApp 路由。不太清楚为什么会发生这种情况。

如果我将默认的图书路线更改为非默认（即更改

 path: ''

到

 path: 'books'

），然后加载 ResArticlesModule 的默认路由。如果我也更改那里的默认路由，它会加载“AuthorsModule”的默认路由。因此，由于某种原因，路由器正在加载第一个可用的默认子路由，其中需要根路由。

我确信这是我的路由配置错误造成的。有人可以帮我找出我做错了什么吗？

Answer 1

目前正在开发我自己的 Angular 项目，并将路由合并到我的应用程序中，并具有各种子路由独立功能。我看到评论是正确的答案，但没有正式放置在答案页面下，所以这是我提交给其他人的，以便更容易看到。

为子组件创建子路由时，您需要确保 app.module 和 feature.modules 中导入模块的顺序按照 app-routing.module 中构建路由的顺序放置和功能路由.modules。

如果您将组件延迟加载到应用程序中并在路由路径中声明，则需要将子模块放置在父模块下方，以便应用程序可以首先读取父模块并从那里处理路由。否则，如果您急切地加载它们，则子模块将需要位于父模块之上才能检测到它的存在，我发现自己很难路由。下面的例子

延迟加载（顺序需要从父级到子级按降序排列）

• app.module.ts

  imports: [
     AppRoutingModule,  
     BookshModule, // from here order doesn't matter as much.  
     AuthorsModule,  
     ResArticlesModule  
  ]
  

预加载（顺序取决于您希望首先从服务应用程序中渲染哪个组件并从那里进行路由）

• app.module.ts

   imports: [    
       BookshModule,   
       AuthorsModule,   
       ResArticlesModule,   
       AppRoutingModule  
   ]
  

我知道我可能在这里遗漏了一些东西，但这将使任何人都朝着正确的方向前进，如果其他人可以添加到此，请这样做。