Angular 辅助路由器插座不显示任何内容？

Question

我有一个工作网站，其中只有 url 的主要内容发生变化，其他的都是“静态的”。 我用路由器插座做了这个，在 app-routing.module.ts 我只是指定了路径。 之后我想创建一个侧边栏，它在每个页面中看起来都一样，但是，当用户通过链接导航时，侧边栏的内容（显示哪些链接/菜单项）应该改变。 所以我想我应该将侧边栏的出口（辅助出口）放入布局中，并且只在链接/菜单项不同时创建组件。 代码：

<div class="rows">
  <div id="row_header">
    <app-header></app-header>
  </div>
  <div id="side_nav">
    <div class="side_nav_container">
      <router-outlet name="sidebar"></router-outlet> 
    </div> 
  </div>
  <div id="row_middle">
    <app-main-content></app-main-content>
  </div>
  <div id="row_footer">
    <app-footer></app-footer>
  </div>
</div>

这是 app.component.ts，这是网站的布局。 你可以看到没有默认的router-outlet，只有侧边栏，因为我把primary outlet放在了中间部分，在app-main-content中。 主要内容.component.html：

<!-- This is where all the content goes, even when the user navigates through menu links (NewsPage, Rules, Topics, Login) -->
<router-outlet></router-outlet>

这是我的 app-routing-module.ts：

const routes: Routes = [
  { path: '', redirectTo: '/topics', pathMatch: 'full'},
  { path: 'topics', component: TopicsPageComponent },
  { path: 'login', component: LoginPageComponent },
  {
    path: 'topics',
    component: SideNavTopicsComponent,
    outlet: 'sidebar'
  },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

导航时主插座工作正常，但侧栏的辅助插座没有任何作用。 你能看出我做错了什么吗？ 也许问题是我将辅助插座放在应用程序组件中，然后才有主插座？

Answer 1

您需要在导航链接中指定要进行导航的所有出口。

例如，按照下面的代码，主出口将被路由到登录组件，侧边栏出口将被路由到主题组件。

<a [routerLink]="[{ outlets: { primary: ['login'],sidebar: ['topics'] } }]">Topics</a>