1

我想在链接处于活动状态时使用routerLinkActive设置 CSS 样式并添加类。我已经尝试过 bootstrap 并且它可以工作，但是当我从前端开发人员那里获得自定义 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>

我已经像下面的代码一样进行了测试，引用自这个问题。我希望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>

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

更新：

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

4

2 回答 2

0

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

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

于 2017-09-11T10:24:03.230 回答
-1

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

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

于 2017-09-08T10:30:10.947 回答