Question

我在Angular 5应用程序中遇到了这个问题，该应用程序在应启用根路由的路由器出口处激活了子路由。我希望阅读此书的人能够在我的路线定义中发现问题，而这是我最近几天没发现的问题。

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

在app模块中，我将根路由定义为：

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
    ]
})

发生的情况是，在加载应用程序时，根路由器出口将在最顶层路由器出口处加载bookroutes的默认路由，我希望在该路由中显示根路由中的mainApp路由。不太清楚为什么会这样。

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

 path: ''

到

 path: 'books'

），然后加载ResArticlesModule的默认路由。如果我也在那里更改默认路由，它将加载“ AuthorsModule”的默认路由。因此，出于某种原因，路由器会在第一个可用的默认子路由中加载预期存在根路由的地方。

我确定这是我配置路由错误的产物。有人可以帮我找出我在做错什么吗？

角度路由-默认的子路由已在根路由级别激活

0 个答案: