如何在Angular5中正确加载不同的路由

问题描述：

我想延迟加载有子路由的模块。但到目前为止，只有主要组件继续加载。这里是我的懒加载路由模块。如何在Angular5中正确加载不同的路由

export const routes: Routes = [ 
    { 
    path: '', 
    component: Notfound404Component, pathMatch: 'prefix', 
    children: [ 
     { path: '', pathMatch: 'full', redirectTo: '404' }, 
     { path: '404', component: Notfound404Component }, 
     { path: '403', component: Notfound403Component } 
    ] 
    }

在我app.routes模块我这样做：

{ path: 'error/403', loadChildren: './errors/errors.module#ErrorsModule'}, 
    { path: 'error', loadChildren: './errors/errors.module#ErrorsModule'}

预期的行为是localhost:4200/error加载Notfound404Component组件和localhost:4200/error/403负载Notfound403Component

不幸的是，仅加载两条路线上均为Notfound404Component。

我该如何做到这一点？

通过阅读文档？ – Milad

答

你必须把此行父路由

{ path: '', pathMatch: 'full', redirectTo: '/' },

，并在孩子的路线与此

{ path: '', component: Notfound404Component },

答

你的路由取代

{ path: '', pathMatch: 'full', redirectTo: '404' },

应该像

解决方案1：

export const routes: Routes = [ 
    { 
    path: '', 
    component: Notfound404Component, 
    children: [ 
     { path: '', pathMatch: 'full', redirectTo: '404' }, 
     { path: '404', component: Notfound404Component }, 
     { path: '403', component: Notfound403Component } 
    ] 
    }

解决方案2：

export const routes: Routes = [ 
    { 
    path: '', 
    component: Notfound404Component, 
    children: [ 
     { path: '', component: Notfound404Component}, 
     { path: '404', component: Notfound404Component }, 
     { path: '403', component: Notfound403Component } 
    ] 
    }

注：确保您的孩子航线

创建父组件对于如：<router-outlet></router-outlet>

如何在Angular5中正确加载不同的路由

相关推荐