Angular命名子路由出口无法加载组件，访问路径跳404求助

问题原因 #

你当前的路由配置中，给子路由指定了命名出口user-outlet，但访问/user/todo、/user/pics这类路径时，Angular会将其识别为主路由出口的子路由，而非你定义的user-outlet命名出口，因此触发404。

解决方案 #

1. 修正路由访问路径 #

对于命名路由出口，需要使用Angular的命名路由路径格式：

/user/(user-outlet:todo)
/user/(user-outlet:pics)

这种格式明确告诉Angular，要将todo/pics组件加载到user-outlet这个命名出口中。

2. 优化路由配置（可选，简化路径跳转） #

如果希望保持/user/todo这类简洁路径，可以调整路由配置，将命名出口的子路由改为默认子路由，同时移除outlet属性：

const USER_ROUTES: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      { path: '', component: UserDefaultContentComponent },
      { path: 'todo', component: UserTodoComponent },      
      { path: 'pics', component: UserPicsComponent },      
    ],
  },
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

同时将UserComponent中的命名出口改为默认出口：

<router-outlet></router-outlet>

这种方式更符合常规嵌套路由用法，路径也更简洁。

3. 标签页跳转示例 #

如果是通过标签页组件跳转，需要使用routerLink的命名路由写法：

<a [routerLink]="[{ outlets: { 'user-outlet': ['todo'] } }]">待办事项</a>
<a [routerLink]="[{ outlets: { 'user-outlet': ['pics'] } }]">我的相册</a>

这种写法会自动生成符合命名路由规则的路径。

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