如何在Angular中使用子路由延迟加载错误路由？

问题描述：

Plunker：https://plnkr.co/edit/GyUApIPQzTvp9vIahYdT?p=preview 如何在Angular中使用子路由延迟加载错误路由？

我有路线设置这样的app.module：

const routes = [ 
    { 
    path: '', 
    component: DummyComponent 
    }, 

    { 
    path: '', // is this right? 
    component: SingleComponent, 
    children: [ 
     { 
     path: '**', // is this right? 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    } 
];

而且在lazy.module我有

const routes = [ 
    { 
    path: '**', // is this right? 
    component: LazyComponent 
    } 
];

的问题是，SingleComponent（页面模板）的实际加载，但页面内容（LazyComponent）未加载。（点击notfound链接查看Plunker的结果）

我应该如何配置这个以便SingleComponent（模板）和LazyComponent（内容）加载正确显示页面？

注意：此LazyComponent被认为是一个错误页面，所以我要赶你在做什么这里调用/虚拟和/ NOTFOUND路线的所有路由（/notfound，/invalid-url，/<anything that doesn't exist in router>）

你应该在你的应用程序的顶层添加你的'path：'**''route绑定到你的错误组件，a最后的路线。这意味着如果在这个匹配器之前没有发现任何东西，你会得到这条路径（这是你想要的一个未找到的页面）。 – Supamiu

答

。

<a routerLink="/dummy">dummy</a> 
<a routerLink="/notfound">notfound</a>

而在您的路线定义中，您尚未定义这些路线。你可能会想要做的是：如果你把一个空的路线

const routes = [ 
    { path: '', redirectTo: '/dummy', pathMatch: 'full' }, 
    { 
    path: 'dummy', 
    component: DummyComponent 
    }, 

    { 
    path: 'notfound', 
    component: SingleComponent, 
    children: [ 
     { 
     path: '', 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    } 
];

第一行会重定向到虚拟路径。你也不需要的是这个特定情况下的**通配符。

我希望这有助于我了解您的问题。

那么，这是有效的，但这个'notfound'只是一个不存在的路线的例子。我想渲染这个懒惰的组件，以防用户转到不存在的页面。 – BrunoLM

答

我发现了一个办法做到这一点，不足之处是，它改变的网址：

应用途径：

const routes = [ 
    { 
    path: '', 
    component: DummyComponent 
    }, 

    { 
    path: '', 
    component: SingleComponent, 
    children: [ 
     { 
     path: 'error', 
     loadChildren: 'src/lazy/lazy.module#LazyModule' 
     } 
    ] 
    }, 

    { path: '**', redirectTo: 'error' }, 
];

懒人路线：

const routes = [ 
    { 
    path: '**', 
    component: LazyComponent 
    } 
];

Plunker https://plnkr.co/edit/xktoV02EoGjPNwrW2VjR?p=preview

如何在Angular中使用子路由延迟加载错误路由？

相关推荐