Angular命名router-outlet报错：无法匹配路由'view'

嘿，我看你遇到了辅助路由（命名路由出口）的匹配错误，这个问题其实是因为导航辅助路由的方式不对——直接用普通的路径字符串会让Angular把它当成主路由的一部分，而不是对应到你定义的viewOutlet或editOutlet。

问题根源 #

你当前的路由配置是正确的，但导航链接没有指定对应的命名出口，导致Angular无法找到匹配的路由规则，所以抛出了Cannot match any routes. URL Segment: 'view'的错误。

具体修复步骤 #

1. 修正路由链接的写法
   在MainAppComponent的模板里，把原来的普通routerLink改成带命名出口的格式：

   • 打开ViewComponent的链接：

     <a [routerLink]="[{ outlets: { viewOutlet: 'view' } }]">view</a>
     

   • 打开EditComponent的链接：

     <a [routerLink]="[{ outlets: { editOutlet: 'edit' } }]">edit</a>
     

   如果需要关闭某个出口（比如清空viewOutlet），可以把对应的值设为null：

   <a [routerLink]="[{ outlets: { viewOutlet: null } }]">Close View</a>
   

2. 验证路由配置
   你的main-app.routing.module.ts配置是没问题的，确认MainAppComponent的模板里正确声明了两个命名路由出口：

   <div class="parent">
     <div class="block">
       <router-outlet name="viewOutlet"></router-outlet>
     </div>
     <div class="block">
       <router-outlet name="editOutlet"></router-outlet>
     </div>
   </div>
   

3. 测试导航逻辑
   修正后，点击链接时URL会变成类似/app/main/(viewOutlet:view)的格式，Angular就能正确匹配到对应的辅助路由，把组件加载到指定的出口里。而且这种方式完全支持你需要的脏值确认导航——你可以给ViewComponent和EditComponent添加CanDeactivate守卫，在表单有脏值时提示用户确认导航。

这样修改后，你的路由应该就能正常工作了，两个命名出口可以独立显示或隐藏组件，满足你的需求。

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