Angular 5：从孙组件触发父路由出口导航至根组件

根据你的组件嵌套层级和路由配置，有几种简单可靠的方式实现这个需求，下面逐一说明：

方法1：使用绝对路径（推荐） #

这是最直接且不受路由层级变化影响的方案。Angular中，routerLink如果以/开头，会直接从根路由开始匹配，不管当前处于哪个子路由层级，都会导航到根路径对应的组件。

结合你提供的路由配置片段，根路径''会重定向到environment.devRedirect，而这个重定向目标正是RootComponent的router-outlet要渲染的内容。所以在孙组件的按钮上直接写：

<button routerLink="/">返回根组件</button>

这种方式的优势是，哪怕后续你的子路由层级调整（比如新增更多嵌套路由），这个导航逻辑依然有效，无需修改。

方法2：使用相对路径（依赖当前路由层级） #

如果你的路由结构是固定的（孙组件是Child组件的直接子路由），也可以用相对路径../来向上跳转。假设你的完整路由结构类似：

const routes: Routes = [
  { 
    path: '', 
    component: RootComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
          { path: 'grandchild', component: GrandChildComponent } // 孙组件路由
        ]
      }
    ]
  },
  // 其他路由配置...
];

孙组件需要向上跳转两级才能回到根路由，所以按钮代码如下：

<button routerLink="../../">返回根组件</button>

⚠️ 注意：这种方式依赖当前的路由嵌套层级，如果后续路由结构发生变化（比如新增中间层级），这个相对路径就会失效，所以没有绝对路径稳定。

额外注意事项 #

• 确保你的孙组件所在的模块已经导入了RouterModule（如果是共享模块，记得导出RouterModule），否则routerLink指令无法生效。
• 如果你的根路由重定向目标environment.devRedirect是一个具体路径（比如/home），也可以直接把routerLink设为该路径，效果完全一致：routerLink="/home"。

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