Angular-根据兄弟式路由链接功能将样式应用于元素

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>

Answer 1

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

<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>
.active-span {
 background-color: red;
}

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

Answer 2

您可以将Routerlinkactive指令应用于 routerlink。

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

更多详细信息。

希望这会有所帮助！

Answer 3

您可以在父selector上调用 [class.active]="router.isActive('/parentUrlFragment',false)"，以在父上具有活动类。

在您的TS文件上：

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

现在您可以访问html中的路由器的 iSActive ;

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

Product
> Category 1
> Category 2

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

Answer 4

发现我最简单/最快的方法使用了类似数组中列出的多个表达式(带有三元运算符(的[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"的类用于样式 parent菜单锚和孩子在此示例中锚定；但是您可以使用单独的类/样式。

Answer 5

如果您是主要导航项目仅充当子菜单的开放/关闭机制，但是您仍然需要使用内置的Routerlinkactive机制，您可以'dupe'dupe'父母认为它实际上是路由链接。这样：

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

技巧在"隐藏"＆lt中；跨度>带有父链接的元素。这将确保在父元素上使用RouterLinkactive属性突出显示父链接。

Answer 6

sub菜单

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