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天的應用程序開發時間。 我從未在文檔中發現不能在組件選擇器中添加結構指令。 有人在文檔中找到嗎？ 謝謝您的幫助！