Angular子子路由无响应：访问深层子路由显示父组件内容

原因分析 #

你遇到的问题核心是父路由组件缺少子路由出口：
当配置子路由（比如products下的create）时，Angular需要在父组件（AdminProductListComponent、CategoryListComponent）的模板中通过<router-outlet>标签指定子组件的渲染位置。如果没有这个标签，子路由对应的组件无法被渲染，页面只会显示父组件的内容。

解决步骤 #

1. 打开AdminProductListComponent的模板文件（如admin-product-list.component.html），添加子路由出口标签：

<!-- 父组件原有内容 -->
<div>产品列表内容...</div>
<!-- 子路由组件渲染出口 -->
<router-outlet></router-outlet>

2. 同样，在CategoryListComponent的模板文件中添加子路由出口标签：

<!-- 父组件原有内容 -->
<div>分类列表内容...</div>
<!-- 子路由组件渲染出口 -->
<router-outlet></router-outlet>

完成以上操作后，访问/admin/products/create或/admin/categories/create时，对应的子组件就会在父组件的<router-outlet>位置正常渲染，页面就能显示子组件的内容了。

内容的提问来源于stack exchange，提问作者Aleksej_Shherbak