子路由中的延迟加载模块

Question

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

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

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

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

此致！ :)

Answer 1

个人路线

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

嵌套路由（儿童）

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

或者，换句话说，导航树中与每个级别匹配的组件将显示在彼此下方，而不是相互替换。 因此，在您的情况下，它们可能会解析但没有<router-outlet>可驻留。

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