Angular - Apply style to element depending on sibling RouterLinkActive?

前端 未结 5 1716
栀梦
栀梦 2021-02-20 15:44

I do not have only one menu bar on my app that I need to be painted when the user navigates, I have another components too that needs to be painted as well. Can I achieve this j

相关标签:
5条回答
  • 2021-02-20 16:10

    you can apply the RouterLinkActive directive to an ancestor of a RouterLink.

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

    More details here.

    Hope this helps!!

    0 讨论(0)
  • 2021-02-20 16:17

    If you're main navigation item merely serves as a open/close mechanism for the submenu, but you still want to use the routerLinkActive mechanism built in to Angular, you can 'dupe' the parent item to thinking it's actually a routerLink. Like this:

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

    The trick is in the 'hidden' < span > element with the parent link. This will make sure the parent link is also highlighted with the routerLinkActive property on the parent element.

    0 讨论(0)
  • 2021-02-20 16:19

    with sub menu

    <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>
    
    0 讨论(0)
  • 2021-02-20 16:23

    You could bind the state of the routerLinkActive directive to whether or not a class is applied to an element as follows:

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

    #rla is a template variable You can find more info about this use case of the RouterLinkActive directive in the docs

    0 讨论(0)
  • 2021-02-20 16:32

    You can call [class.active]="router.isActive('/parentUrlFragment',false)" on Parent Selector to have active class on the parent.

    On your TS file :

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

    Now you can access the isActive method of Router in your html;

    So if you have a Nested Menu Like :

    Product
    > Category 1
    > Category 2
    

    Selecting any of the Category Link will have active class on Product selector with [class.active]="router.isActive('/product',false)"

    0 讨论(0)
提交回复
热议问题