Угловой - Применить стиль к элементу в зависимости от родного брата RouterLinkActive?

Question

У меня нет только одной строки меню в моем приложении, которую мне нужно рисовать, когда пользователь перемещается, у меня есть и другие компоненты, которые также должны быть нарисованы. Могу ли я достичь этого, просто используя routerLinkActive?

menu.html

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

Это меню прекрасно работает. Но я спрашиваю, как я могу использовать свойство routerLinkActive, размещенное в другом HTML-теге. лайк:

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

Вы можете позвонить [class.active]="router.isActive('/parentUrlFragment',false)" в родительском селекторе, чтобы иметь активный класс для родительского элемента.

В вашем файле TS:

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

Теперь вы можете получить доступ к методу isActive для Router в своем HTML;

Итак, если у вас есть вложенное меню, например:

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>

и в ТС

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

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

Примечание. В этом примере я использую класс под названием «active-class» для стилизации как привязки родительского меню, так и привязки дочерних элементов; но вы можете использовать отдельные классы / стили.

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

Если ваш основной элемент навигации просто служит механизмом открытия / закрытия для подменю, но вы все равно хотите использовать механизм routerLinkActive, встроенный в Angular, вы можете "обмануть" родительский элемент, думая, что это на самом деле 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 в родительском элементе.