angular - 如何使父组件的侧边栏以角度显示在子组件中

Question

我的应用程序中有一个 home 组件，它基本上是应用程序中存在的所有其他路由的基础。在主组件中，我有一个侧边栏，当我导航到它们时，我希望它显示在每个其他组件上，我该如何实现呢？这是我的 home.component.ts 文件

<div class="container" >
  <div class="d-flex overflow-auto" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-light border-right sticky-top" id="sidebar-wrapper">
      <div class="sidebar-heading"></div>
      <div class="list-group list-group-flush">
        <a routerLink="profile" routerLinkActive="active" class="list-group-item list-group-item-action bg-light"
           role="button">Profile</a>
        <a routerLink="network" routerLinkActive="active"
           class="list-group-item list-group-item-action bg-light pe-auto" role="button">Network</a>
        <a href class="list-group-item list-group-item-action bg-light" (click)="logOut()">Log Out</a>
        <br>
        <div class="list-group-item bg-light user-email">Logged in as: {{email}}</div>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->
    
    <div id="page-content-wrapper" *ngIf="router.url === '/home'">
         <-- Home Content -->
    </div>
  </div>
</div>
<router-outlet></router-outlet>

例如，如果我导航到“网络”组件，它是“家庭”组件的子组件，我可以看到侧边栏和“网络”显示的内容，但有点淡出并且无法点击。 app-routing.module.ts 中的父子关系如下：

{ path: 'home', component: HomeComponent, canActivate:[AuthGuardService],
    children: [
      { path: 'network', component: NetworkComponent}
    ]
}

我怎样才能解决这个问题？

标签： angular