Angular单路由加载多组件：如何同时加载Home与Sidebar组件？

看起来你想在访问根路径时同时渲染HomeComponent和SidebarComponent，而不是把Sidebar作为Home的子路由（原来的配置只有访问/sidebar才会加载它）。咱们可以通过Angular的**命名路由出口（named router outlets）**来实现这个需求，具体调整步骤如下：

1. 修改路由配置 #

把原来的component属性替换为复数形式的components，在其中指定默认组件（Home）和侧边栏组件，同时保留子路由配置（让about、clients等页面在默认出口中渲染）：

const appRoutes: Routes = [
  { 
    path: '', 
    // 使用components配置多个组件，对应不同的路由出口
    components: {
      default: HomeComponent, // 对应默认的<router-outlet>
      sidebar: SidebarComponent // 对应命名为sidebar的<router-outlet>
    },
    children: [
      { path: 'about', component: AboutComponent },
      { path: 'clients', component: ClientsComponent },
      { path: 'services', component: ServicesComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'datatable', component: DataComponent }
    ]
  }
];

2. 在根组件模板中添加命名路由出口 #

打开你的根组件模板（通常是app.component.html），添加一个命名的路由出口和默认路由出口，用来分别渲染Sidebar和Home：

<!-- 侧边栏组件的渲染位置 -->
<router-outlet name="sidebar"></router-outlet>

<!-- Home组件及子路由页面的渲染位置 -->
<router-outlet></router-outlet>

如果希望子路由（比如AboutComponent）的内容显示在HomeComponent内部，记得在HomeComponent的模板中也添加一个默认的<router-outlet>，这样子路由的内容会嵌套在Home里，而Sidebar始终在页面侧边。

3. 调整布局（可选） #

为了让Sidebar和Home并排显示，可以添加简单的CSS布局，比如在根组件的样式中：

:host {
  display: flex;
}

router-outlet[name="sidebar"] + router-outlet {
  flex: 1;
  padding: 1rem;
}

为什么原来的配置不符合需求？ #

你原来的路由把SidebarComponent设为HomeComponent的子路由，这意味着只有当访问/sidebar路径时才会加载Sidebar，并且需要HomeComponent内部有<router-outlet>来渲染它——这显然不是你想要的“单路由同时加载两个组件”的效果。

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