Angular 4 routerLinkActive 未添加 class active

Question

我想设置 css 的样式并在 link 使用 routerLinkActive 激活时添加 class。我在 bootstrap 中尝试过并且它有效，但是当我从前端开发人员那里获得自定义 CSS 时，它不会添加表明它处于活动状态的 class，即使当路由 url 匹配 routeLink.

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

我已经像下面的代码一样进行了测试，引用自. I expect the i showed because the routerlink is active, but it doesn't, even when I am in the 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>

希望有人能消除我的沮丧。谢谢。

更新：

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

Answer 1

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

是 sidebar.component.css 中声明的 class 还是 sidebar.component.ts[= 中的每个内联 css 17=] ?

Answer 2

我找到了解决办法。我的 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 包含布尔值，用户是否已登录。

解决方法：每条路由都会加载navbar，但是我把*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 天的应用程序开发时间。我从未在文档中发现无法在组件选择器中添加结构指令。你们中有人在文档中找到了吗？感谢大家的帮助！

Angular 4 routerLinkActive 未添加 class active

Angular 4 routerLinkActive not adding class active

angular

angular2-router

routerlinkactive