Question

我正在为我的有角度的应用程序创建一个侧边栏，到目前为止效果很好。

问题是我希望仍在界面上的主动药丸保留在active上，但是只要单击侧边栏以外的任何地方，它就会消失。

NB：侧边栏是独立组件

sidebar.component.html：

    <nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2">

    <ul class="nav nav-pills flex-column sidebar-nav" >

        <li class="nav-item">
          <a class="nav-link" routerLink="home">Home</a>
        </li>
        <li "nav-item">
          <a class="nav-link" routerLink="excelDash">Excel</a>
        </li>
        <li  class="nav-item">
          <a class="nav-link" routerLink="manager-dashboard">Dashboard</a>
        </li>
      </ul>

    <a (click)="logout()" class="logout-button"><em class="fa fa-power-off"></em> LogOut</a>
 </nav>

sidebar.component.css

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  padding-left: 0;
  padding-right: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  background: #cf022b; }

.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: #e80230;
  font-family: "OpenSans",sans-serif; }

任何帮助将不胜感激。

Answer 1

您应该使用routerLinkActive来更改活动规则来设置活动项目：

<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2">
    <ul class="nav nav-pills flex-column sidebar-nav" >
        <li class="nav-item">
          <a class="nav-link" routerLink="home" routerLinkActive='active'>Home</a>
        </li>
        <li "nav-item">
          <a class="nav-link" routerLink="excelDash" routerLinkActive='active'>Excel</a>
        </li>
        <li  class="nav-item">
          <a class="nav-link" routerLink="manager-dashboard" routerLinkActive='active'>Dashboard</a>
        </li>
      </ul>
    <a (click)="logout()" class="logout-button"><em class="fa fa-power-off"></em> LogOut</a>
 </nav>

在CSS中：

.active {
     background-color: #e80230;
     font-family: "OpenSans",sans-serif;
}

正在工作DEMO。

主动侧栏药不再有效

1 个答案: