Angular 5.2.0中Router Outlet在AppComponent外使用routerLink失败问题

我之前在Angular 5项目里也碰到过类似的命名路由Outlet不生效的情况，结合你的配置和场景，咱们一步步来排查解决：

1. 优先检查路由跳转的路径类型（相对/绝对） #

你当前处于/page/28/1这个带参数的子路由下，使用相对路径的routerLink配置[{ outlets: { popup: ['login'] } }]时，Angular 5.2.0对这种嵌套路由下的命名Outlet相对跳转解析存在兼容性问题。

解决尝试：改用绝对路径写法，确保直接指向根路由下的命名Outlet：

<a class="nav-link" [routerLink]="['/', { outlets: { popup: ['login'] } }]">登录</a>

这种写法会保留当前主路由的状态（依然是/page/28/1），同时激活根级的popup Outlet加载LoginComponent。

2. 确认命名路由的配置层级 #

检查你的login路由是否配置在根路由数组中，而不是作为page路由的子路由。因为你的popup Outlet是放在app.component.html里的根级Outlet，对应的路由必须注册在根路由配置里，不能嵌套在其他路由的children数组中。

正确的根路由配置示例：

const routes: Routes = [
  { path: 'page/:albumId/:pageNo', component: AlbumPageComponent },
  { path: 'login', component: LoginComponent, outlet: 'popup' }, // 根级配置，正确
  // ...其他根路由
];

3. 排查路由跳转的错误信息 #

通过订阅路由事件，查看是否有匹配失败的错误：
在AlbumPageComponent或AppComponent中添加以下代码：

import { Router, NavigationError } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationError) {
      console.error('路由跳转错误:', event.error);
    }
  });
}

打开浏览器控制台，点击跳转链接后查看是否有明确的错误提示（比如“无法匹配路由”之类的信息），这能帮你快速定位问题。

4. 确认根级命名Outlet的DOM可见性 #

检查app.component.html中的<router-outlet name="popup"></router-outlet>是否被隐藏（比如被*ngIf、[hidden]指令控制），或者放置在了错误的位置（比如嵌套在主router-outlet内部）。它应该和主<router-outlet>同级，确保在DOM中始终存在且可见。

5. 验证Angular 5版本的特性兼容 #

Angular 5.2.0虽然支持命名路由Outlet，但在带参数的嵌套路由场景下，相对路径的命名跳转确实存在已知的小问题。如果上述方法都无效，可以尝试在routerLink中显式携带当前路由的参数，确保相对路径解析正确：

<a class="nav-link" [routerLink]="[{ outlets: { popup: ['login'] }, albumId: albumId, pageNo: pageNo }]">登录</a>

（实际项目中可以用组件内的albumId和pageNo变量代替硬编码值）

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