Question

我有一个正常工作的网站，其中只有主要内容随url改变，其他则为“静态”。我是通过router-outlet做到的，在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，这是网站的布局。您会看到没有默认的路由器出口，仅针对侧边栏，因为我将主出口放在app-main-content的中间部分。 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>

角度辅助路由器出口不显示任何内容？

1 个答案: