Angular 4 routerLinkActive不添加类活动

Question

我想使用 routerLinkActive 设置css的样式并在链接处于活动状态时添加类。我已尝试过bootstrap并且它可以工作，但是当我从前端开发人员那里获得自定义CSS时，它不会添加声明它处于活动状态的类，即使路径网址与匹配routeLink

我有点沮丧，不知道出了什么问题。我希望当路由处于活动状态时，它会在锚点中添加类 menu-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>

我测试过类似下面的代码，引自this question。我希望 i 显示是因为路由器链接处于活动状态，但即使我在 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 中声明的，还是在 sidebar.component.ts 中的每个内联css中声明？

Answer 2

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

<强> 的src /应用程序/ app.component.html

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

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

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

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

<强> 的src /应用程序/ app.component.html

<app-navbar></app-navbar>

<强> 的src /应用程序/导航栏/ 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天。我从未在文档中发现无法在组件选择器中添加结构指令。你们中的任何人在文档中找到了吗？谢谢你所有的帮助！