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

Question

我的应用程序上不仅有一个菜单栏需要在用户导航时绘制，我还有另一个组件也需要绘制。我可以通过使用来实现这一点routerLinkActive吗？

菜单.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>

score 23 · Accepted Answer

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

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

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

#rla是一个模板变量您可以在文档中找到有关该RouterLinkActive指令用例的更多信息

score 14 · Accepted Answer

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

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

更多细节在这里。

希望这可以帮助！！

score 3 · Accepted Answer

您可以调用[class.active]="router.isActive('/parentUrlFragment',false)"父选择器以在父对象上设置活动类。

在您的 TS 文件上：

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

现在你可以在你的html中访问Router的isActive方法了；

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

Product
> Category 1
> Category 2

选择任何类别链接将在产品选择器上具有活动类[class.active]="router.isActive('/product',false)"

score 0 · Accepted Answer

如果您的主导航项仅用作子菜单的打开/关闭机制，但您仍想使用 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>

诀窍在于带有父链接的“隐藏”<span> 元素。这将确保父链接也使用父元素上的 routerLinkActive 属性突出显示。

score 0 · Accepted Answer

带子菜单

<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>

score 0 · Accepted Answer

Found that easiest/fastest approach for me uses [ngClass] with multiple expressions (with ternary operator) listed in an array like this:

<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>

and in TS

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

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

Note: I use a class called 'active-class' to style both the parent menu anchor and the children anchors in this example; but you could use separate classes/styles.

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

6 回答 6

Related

Reference