Question

我的应用程序上没有一个菜单栏，我需要在用户导航时绘制，我还有其他组件也需要绘制。我可以使用routerLinkActive吗？

来实现这一目标

menu.html

<menu>
  <a routerLink="page1" routerLinkActive="active">
      option1
  </a>
  <a routerLink="page2" routerLinkActive="active">
      option2
  </a>
</menu>

此菜单效果很好。但我要问的是如何利用其他HTML标签中的routerLinkActive属性。像：

main.html中

<main>
    <span class="title" routerLinkActive="active">My sub child part</span>
</main>

Answer 1

您可以将routerLinkActive指令的状态绑定到一个类是否应用于元素，如下所示：

<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>

.active-span {
 background-color: red;
}

#rla是模板变量 您可以在the docs

中找到有关此RouterLinkActive指令用例的更多信息

Answer 2

您可以将RouterLinkActive指令应用于a的祖先 RouterLink。

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

更多详情here。

希望这会有所帮助!!

Answer 3

您可以在“父级选择器”上调用<style scoped> /deep/ tr.v-data-table__selected { background: #7d92f5 !important; } </style>，以在父级上启用活动课程。

在您的TS文件上：

[class.active]="router.isActive('/parentUrlFragment',false)"

现在，您可以在HTML中访问Router的 isActive 方法；

因此，如果您有一个嵌套菜单，如：

import { Router, ActivatedRoute } from '@angular/router';
constructor(public router: Router){}

选择任何类别链接将在产品选择器上使用Product > Category 1 > Category 2

激活活动类

Answer 4

如果您是主导航项，仅用作子菜单的打开/关闭机制，但您仍要使用Angular内置的routerLinkActive机制，则可以“复制”父项以认为它实际上是routerLink 。像这样：

<nav class="main-nav">
  <a routerLink="/someroute"
     routerLinkActive="active">somelink to a route</a>
  <a (click)="openSubMenu('some-sub-menu')"
     routerLinkActive="active"><span          
     routerLink="/parentlink"
      [hidden]="true">hidden</span>Some Sub Route</a>
</nav>
<nav class="sub-nav">
  <a *ngIf="activeSubMenu ==='some-sub-menu'"
     routerLinkActive="active"
     routerLink="/parentlink/youractualsubroute">Some Sub-route</a>
</nav>

技巧是在带有父链接的“ hidden” 元素中。这将确保父链接也通过父元素上的routerLinkActive属性突出显示。

Answer 5

带有子菜单

<ul>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a routerLink="/">home</a>
  </li>
  <li routerLinkActive="active">
    <a routerLink="/about">about</a>
  </li>
  <li routerLinkActive="active">
    <a href="javascript:void(0)" data-toggle="dropdown">service</a>
    <ul class="dropdown-menu">
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a href="/service">service list</a>
      </li>
      <li routerLinkActive="active">
        <a href="/service/details">service Details</a>
      </li>
    </ul>
  </li>
</ul>

Answer 6

发现对我来说最简单/最快的方法使用 [ngClass] 和多个表达式（带有三元运算符），列在这样的数组中：

<a [ngClass]="[
  router.isActive('/about-me', true) ? 'active-class' : '',
  router.isActive('/hobbies', true) ? 'active-class' : '',
  router.isActive('/photo-gallery', true) ? 'active-class' : '']"
  (click)="showsSubmenu = !showsSubmenu">
  Parent Menu
</a>
<div *ngIf="showsSubmenu" class="submenu>
  <a routerLink="about-me" routerLinkActive="active-class">About Me</a>
  <a routerLink="hobbies" routerLinkActive="active-class">Hobbies</a>
  <a routerLink="photo-gallery" routerLinkActive="active-class">Photo Gallery</a>
</div>

并在 TS 中

import { Router } from '@angular/router';

export class NavbarComponent implements OnInit {
  constructor(
    public router: Router
  ) {}
}

注意：在本例中，我使用一个名为“active-class”的类来设置父菜单锚和子锚的样式；但您可以使用单独的类/样式。

Angular - 根据兄弟RouterLinkActive将样式应用于元素？

6 个答案: