Angular 路由加载没有 child 的 grandchild 组件
Angular routing loading the grandchild component without the child
我创建了一个 stackblitz 来尝试说明 child 路由显示在 parent 之外时遇到的问题。相反,该应用程序有一个类似但几乎相反的问题:当导航到没有 child url 的 grandparent 路线时,它会将 grandchild 组件放在 grand 内parent 组件不涉及 child 组件。即使 grandchild 仅在 child.
上定义
有 2 个嵌套布局组件:
LayoutComponent
(grandparent - 定义为 app.routing.ts 中路径的组件:'')
StoreLayoutComponent
(parent - 定义为 store.routing.ts 中路径的组件:'store')
- 和一个名为
DashboardComponent
(child) 的组件。
StoreLayoutComponent
有一个名为 'dashboard' 的 child 路由,显示 DashboardComponent
.
导航到 'store/dashboard' 应该在 StoreLayoutComponent
中显示 DashboardComponent
。确实如此。
导航到 'store' 应该是一条无效路线,但它直接在 LayoutComponent
中显示 DashboardComponent
。它从不加载 StoreLayoutComponent
,即使那是该路由的 parent 组件,而且 'DashboardComponent' 甚至没有在 LayoutComponent 模块中定义。
为什么这是一条有效的路线?angular 如何在 grandparent 中显示仅定义为 parent 的 child 的组件?
Navigating to 'store' should be an invalid route, but instead it displays the DashboardComponent directly within the LayoutComponent. It never loads StoreLayoutComponent, even though that's the parent component for that route, and 'DashboardComponent' is not even defined in the LayoutComponent module.
导航到 'store' 不会是无效路由,但会加载 StoreModule 并显示 StoreLayoutComponent
,因为它与 ''
路径匹配。
在您的情况下,它没有加载 StoreLayoutComponent
,而是加载 DashboardComponent
,因为您在 StoreModule
导入数组中导入 StoreDashboardModule
。 StoreDashboardModule
也定义了一个空路径 ''
路由,并且由于您正在导入它,所以这就是 'store'.
匹配的内容
在 'store/dashboard' 的情况下,它正确匹配子数组中的路径 'dashboard'
。
PS: 由于您是延迟加载 StoreDashboardModule
,因此不应在 StoreModule
导入数组中直接导入。
我创建了一个 stackblitz 来尝试说明 child 路由显示在 parent 之外时遇到的问题。相反,该应用程序有一个类似但几乎相反的问题:当导航到没有 child url 的 grandparent 路线时,它会将 grandchild 组件放在 grand 内parent 组件不涉及 child 组件。即使 grandchild 仅在 child.
上定义有 2 个嵌套布局组件:
LayoutComponent
(grandparent - 定义为 app.routing.ts 中路径的组件:'')StoreLayoutComponent
(parent - 定义为 store.routing.ts 中路径的组件:'store')- 和一个名为
DashboardComponent
(child) 的组件。
StoreLayoutComponent
有一个名为 'dashboard' 的 child 路由,显示 DashboardComponent
.
导航到 'store/dashboard' 应该在 StoreLayoutComponent
中显示 DashboardComponent
。确实如此。
导航到 'store' 应该是一条无效路线,但它直接在 LayoutComponent
中显示 DashboardComponent
。它从不加载 StoreLayoutComponent
,即使那是该路由的 parent 组件,而且 'DashboardComponent' 甚至没有在 LayoutComponent 模块中定义。
为什么这是一条有效的路线?angular 如何在 grandparent 中显示仅定义为 parent 的 child 的组件?
Navigating to 'store' should be an invalid route, but instead it displays the DashboardComponent directly within the LayoutComponent. It never loads StoreLayoutComponent, even though that's the parent component for that route, and 'DashboardComponent' is not even defined in the LayoutComponent module.
导航到 'store' 不会是无效路由,但会加载 StoreModule 并显示 StoreLayoutComponent
,因为它与 ''
路径匹配。
在您的情况下,它没有加载 StoreLayoutComponent
,而是加载 DashboardComponent
,因为您在 StoreModule
导入数组中导入 StoreDashboardModule
。 StoreDashboardModule
也定义了一个空路径 ''
路由,并且由于您正在导入它,所以这就是 'store'.
在 'store/dashboard' 的情况下,它正确匹配子数组中的路径 'dashboard'
。
PS: 由于您是延迟加载 StoreDashboardModule
,因此不应在 StoreModule
导入数组中直接导入。