角路由加载没有子组件的孙组件

Question

我创建了一个 stackblitz 来尝试说明在父级外部显示子路由时遇到的问题。相反，该应用程序有一个类似但几乎相反的问题：当导航到没有子 url 的祖父路由时，它将孙子组件放置在祖父组件中，而不涉及子组件。即使孙子只定义在孩子身上。

有2个嵌套布局组件：

• LayoutComponent（祖父 - 定义为 app.routing.ts 中路径的组件：''）
• StoreLayoutComponent（父级 - 定义为 store.routing.ts 中路径的组件：'store'）
• 还有一个名为DashboardComponent（子）的组件。

StoreLayoutComponent 有一个名为“dashboard”的子路由，它显示DashboardComponent。

导航到“商店/仪表板”应在StoreLayoutComponent 中显示DashboardComponent。确实如此。

导航到“商店”应该是无效路线，而是直接在LayoutComponent 内显示DashboardComponent。它从不加载StoreLayoutComponent，即使那是该路由的父组件，而且 'DashboardComponent' 甚至没有在 LayoutComponent 模块中定义。

为什么这是一条有效的路线，以及如何在祖父母中以角度显示仅定义为父母的孩子的组件？

https://stackblitz.com/edit/angular-ivy-xqtxla

Answer 1

导航到“商店”应该是无效的路线，而是直接在 LayoutComponent 中显示 DashboardComponent。它从不加载 StoreLayoutComponent，即使那是该路由的父组件，并且 'DashboardComponent' 甚至没有在 LayoutComponent 模块中定义。

导航到“商店”不会是无效路线，但会加载 StoreModule 并显示 StoreLayoutComponent，因为它与 '' 路径匹配。

在您的情况下，它不是加载StoreLayoutComponent，而是加载DashboardComponent，因为您在StoreModule 导入数组中导入StoreDashboardModule。 StoreDashboardModule 也定义了一个空路径 '' 路由，并且由于您正在导入它，这就是与“商店”匹配的内容。

如果是“商店/仪表板”，它会正确匹配子数组中的路径 'dashboard'。

PS：由于你是懒加载StoreDashboardModule，所以不应该直接在StoreModule导入数组中导入。