Angular 4 routerLinkActive不添加活动类

Question

我想设置样式的CSS并使用routerLinkActive激活链接时添加类。 我已经在bootstrap中进行了尝试，并且可以正常工作，但是当我从前端开发人员那里获得自定义CSS时，即使路由的URL与routeLink匹配，它也不会添加表明其处于活动状态的类。

我有点沮丧，不知道出什么问题了。 我希望当路由处于活动状态时，它将在锚中添加class -active菜单 。

这是我的代码：

sidebar.component.html

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive="menu-active">
    <i class="ti ti-anchor"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

我已经测试过像下面这个问题引用的代码。 我希望我能显示出来是因为routerlink是活动的，但即使我在http：// localhost：4200 / dashboard中 ，它也没有激活。

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive #rla="routerLinkActive">
    <i class="ti ti-anchor" *ngIf="rla.isActive"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

希望有人能消除我的挫败感。 谢谢。

更新：

当我检查元素时，甚至没有添加该类。 这是它的屏幕截图：

Answer 1

我认为问题在于Component无法引用.menu-active类。

是类中sidebar.component.css或每内嵌CSS中sidebar.component.ts声明？

Answer 2

我找到了解决方案。 我的routerLinkActive损坏了，因为我在组件选择器中使用了* ngIf 。 如果用户已登录，我应该显示导航栏，并且导航栏也是我的内容的包装 。 因此，如果用户未登录，我使用* ngIf隐藏导航栏。这就是我的问题所在。 我的导航栏包含侧栏和顶部栏，为了避免再次在组件选择器中添加* ngIf，我将其合并。

src / app / app.component.html

<app-navbar *ngIf="isLoggedIn; else loginpage"></app-navbar>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

我的代码中的isLoggedIn包含布尔值，无论用户是否登录。

解决方案 ：每条路线都会加载导航栏，但是我在导航栏div中放置了* ngIf =“ isLoggedIn” ，因此，如果用户未登录，则不会显示侧边栏，而仅显示内容。

src / app / app.component.html

<app-navbar></app-navbar>

src / app / navbar / navbar.component.html

<div id="wrapper" [ngClass]="menu" *ngIf="isLoggedIn; else loginpage">
   <div class="side-menu" id="sidebar-wrapper" >
    // the sidebar HTML
   </div>
   <div class="wrapper-body">
       <div class="top-menu" >
        // the topbar HTML
       </div>

       <div class="content-wrapper">
          <div class="row main-content">
              <router-outlet></router-outlet>
          </div>
       </div>
    </div>
</div>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

我从没想过将* ngIf放入组件选择器会浪费2-3天的应用程序开发时间。 我从未在文档中发现不能在组件选择器中添加结构指令。 有人在文档中找到吗？ 谢谢您的帮助！