Angular 4 routerLinkActive 不添加类活动

Question

我想在链接处于活动状态时使用 routerLinkActive 设置 CSS 样式并添加类。我已经尝试过引导并且它可以工作，但是当我从前端开发人员那里获得自定义 CSS 时，它不会添加声明它处于活动状态的类，即使路由 url 与 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 显示，因为 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

我找到了解决方案。我的 routerLinkActive 坏了，因为我在 组件选择器 中使用了 *ngIf。如果用户已登录，我应该显示导航栏，并且 navbar 也是我的内容的 wrapper。因此，如果用户未登录，我使用 *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 包含布尔值，无论用户是否登录。

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

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 天的应用开发时间。我从未在文档中发现无法在组件选择器中添加结构指令。你们中有人在文档中找到了吗？谢谢大家的帮助！

Answer 2

我认为问题是组件无法引用.menu-active 类。

是在 sidebar.component.css 中声明的类还是在 sidebar.component.ts 中的每个内联 css ？