Angular嵌套子路由问题：深层组件未触发，需保留children结构解决

你的问题核心是父组件ViewAccountComponent的模板中缺少<router-outlet>标签，Angular的嵌套路由组件必须通过父组件内的路由出口才能渲染出来，这是嵌套路由生效的必要条件。

具体解决步骤： #

1. 打开ViewAccountComponent的模板文件（比如view-account.component.html），添加<router-outlet>标签。这个标签会作为子路由组件（ViewUserComponent）的渲染容器。

示例模板代码：

<!-- ViewAccountComponent的内容 -->
<h2>账户详情：{{ accountname }}</h2>
<!-- 子路由组件会渲染在这里 -->
<router-outlet></router-outlet>

2. 你的路由配置本身是正确的，不需要修改account-routing.module.ts中的嵌套结构。当前的路由配置：

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: AccountComponent,
      },
      {
        path: ':accountname',
        component: ViewAccountComponent,
        children: [
          {
            path: ':userid',
            component: ViewUserComponent
          }
        ]
      },
    ]
  }
];

完成上述修改后，访问account/testaccountName/123I时，ViewAccountComponent会先渲染，然后ViewUserComponent会在它内部的<router-outlet>位置加载出来，嵌套路由就能正常工作了。

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