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

Posted 2023-02-22

【中文标题】Angular - 根据兄弟RouterLinkActive将样式应用于元素？

【英文标题】：Angular - Apply style to element depending on sibling RouterLinkActive?

【发布时间】：2017-11-06 16:17:38

【问题描述】：

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

menu.html

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

这个菜单很好用。但我要问的是如何利用放置在其他 html 标记中的 routerLinkActive 属性。喜欢：

ma​​in.html

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

【参考方案1】：

发现对我来说最简单/最快的方法是使用 [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”的类来设置父菜单锚点和子锚点的样式；但你可以使用单独的类/样式。

【参考方案2】：

带有子菜单

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

【参考方案3】：

您可以在 Parent Selector 上调用 [class.active]="router.isActive('/parentUrlFragment',false)" 以在 parent 上拥有活动类。

在您的 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)" 的产品选择器上具有活动类

【参考方案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>

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

【参考方案5】：

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

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

.active-span 
 background-color: red;

#rla 是一个模板变量 你可以在the docs中找到更多关于RouterLinkActive指令用例的信息

【讨论】：

谢谢！你能解释一下#rla是什么吗？如果这对于其他完全不同的组件是否可以访问？

编辑了我的答案。您可以通过一种方式绑定将 rla.isActive 的值传递给 tempate 内的其他组件

在父元素中使用了这个方法，效果很好。谢谢你:)

@AngelaAmarapala 很高兴听到

@RicardoGonzales 这是否解决了您的问题？在这种情况下，请考虑将此标记为答案

【参考方案6】：

您可以将 RouterLinkActive 指令应用于 路由器链接。

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

更多详情here.

希望这会有所帮助！

【讨论】：

第一次看 routerLink 指令文档，真的很有帮助！

@MadhuRanjan 如果我想绘制属于其他组件的 div，而不是像您的示例那样的父组件，该怎么办？

您可以创建自己的指令，该指令可以将路由和css类作为参数，并检查路由匹配是否可以应用提供的css类，干杯！！

@MadhuRanjan 在黑暗中的光线非常好！谢谢，我已经改变了这个实现的方向，现在正在工作！

@napstercake，很高兴我能帮上忙，干杯！！