时间戳

首页 > 解决方案 > 子路由中的延迟加载模块

angular - 子路由中的延迟加载模块

问题描述

我只是有一个问题，当我以角度延迟加载孩子的孩子时，我的组件没有加载。由于某种原因，解析器已加载。

具体来说，我已经在我的应用路由模块中加载了我的子路由。对于这种情况，我使用前面提到的延迟加载。这些子路由加载没有任何问题，但是如果我想在此路由中加载另一个子路由，则会出现问题。代码的结构相同，但由于某种原因，它不能在更深的一层上工作。你们中是否有人可能有此用例的代码示例，或者知道为什么会发生这种情况？

编辑了更多细节：我为 app.module 创建了一个解析器（您可以识别它是否与 console.log 一起加载）。如果您输入 URL（[...]stackblitz/first/second），Angular 的正常行为是加载解析器。如果我将其声明为子组件，则不再加载组件，但解析器仍然会加载。

这是链接：https ://stackblitz.com/edit/angular-6csggp

最好的祝福！:)

标签： angulartypescript

解决方案

个别路线

正如我在评论中已经提到的，LazyLoading 的工作原理是一样的，无论你想要实现它的深度。我创建了一个小的StackBlitz来给你一个例子来说明它是如何工作的。

嵌套路线（儿童）

如果您想将您的路线声明为子路线（这是您想要通过我阅读的内容执行的操作），角度将尝试将它们加载为嵌套导航。粗略解释，这意味着您app.component有一个<router-outlet>托管您的父组件的app-routing.module. 在您的路由中声明的子级将依次加载到<router-outlet>位于父组件中的 a 中。如果多条路由有共同点（例如标头），则通常使用这种路由方法，因此不应在每条路由中重复。

或者，换句话说，与导航树中每个级别匹配的组件将显示在彼此下方，而不是相互替换。因此，就您而言，他们可能会解决但没有<router-outlet>居住权。

我修改了fork StackBlitz以向您展示嵌套导航如何与 LazyLoading 一起使用。此外，一个直接链接，即使直接打开，您也可以看到所有内容都在加载/top-level-nested/first-child/second-child：https ://angular-juudzm.stackblitz.io/top-level-nested/first-child/second-child

推荐阅读