求助：Angular 8多命名router-outlet组件已导入但未初始化渲染

嘿，我仔细看了你的问题和示例场景，发现核心问题是命名路由的配置与routerLink的写法不匹配，导致第二个router-outlet无法正确加载目标组件。咱们一步步来修复：

1. 问题根源分析 #

你的URL能正常变化说明路由导航已经触发，但组件没渲染，是因为你没有明确告诉Angular要把这些子组件渲染到哪个命名outlet里。默认情况下，路由会加载到主（无名）router-outlet，而你的sidebar是命名outlet，必须在路由配置和routerLink中双明确指定。

2. 具体修改步骤 #

步骤1：给路由配置添加outlet指定 #

在PhotosModule的路由配置里，给需要渲染到sidebar的子路由加上outlet属性，明确绑定目标outlet名称：

// photos-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: PhotosComponent,
    children: [
      {
        path: 'google',
        component: GoogleComponent,
        outlet: 'sidebar' // 关键：指定该路由渲染到sidebar outlet
      },
      {
        path: 'facebook',
        component: FacebookComponent,
        outlet: 'sidebar'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PhotosRoutingModule { }

步骤2：修正routerLink的写法 #

在侧边栏的导航链接里，不能用普通的路径数组，需要用outlets对象明确指定目标outlet：

<!-- photos.component.html -->
<div class="sidebar">
  <p>Photos</p>
  <a [routerLink]="[{ outlets: { sidebar: ['google'] } }]">Google</a>
  <a [routerLink]="[{ outlets: { sidebar: ['facebook'] } }]">Facebook</a>
</div>

这种写法会直接告诉Angular：把google/facebook路由加载到名为sidebar的router-outlet中。

步骤3：确认主模板的router-outlet命名正确 #

检查app.component.html里的命名outlet是否和配置完全一致：

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet> <!-- 名称必须和路由配置中的outlet值匹配 -->

3. 额外验证点 #

• 确保GoogleComponent和FacebookComponent已经在PhotosModule中正确声明；
• 确认PhotosRoutingModule已导入PhotosModule，且PhotosModule已导入主AppModule；
• 如果是懒加载模块，检查loadChildren的路径是否正确。

这样修改后，点击侧边栏的导航链接，对应的组件就能正确渲染到sidebar这个命名router-outlet里了。

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