RouterLinkActive

Stable Directive

Что делает

Позволяет добавить CSS-класс к элементу, когда маршрут ссылки становится активным.

Как использовать

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

Обзор класса

class RouterLinkActive implements OnChanges, 
  constructor(router: Router, element: ElementRef, renderer: Renderer, cdr: ChangeDetectorRef)
  
  
  links : QueryList<RouterLink>
  linksWithHrefs : QueryList<RouterLinkWithHref>
  routerLinkActiveOptions : {exact: boolean}
  isActive : boolean
  ngAfterContentInit() : void
  routerLinkActive 
  ngOnChanges(changes: SimpleChanges) : void
  ngOnDestroy() : void
}

Селекторы

[routerLinkActive]

Экспортировано как

routerLinkActive

Описание класса

Директива RouterLinkActive позволяет добавить CSS-класс к элементу, когда маршрут ссылки становится активным.

Рассмотрим следующий пример:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

Когда URL равен '/user' или '/user/bob', класс active-link будет добавлен к тегу a. Если URL изменится, класс будет удален.

Вы можете задать несколько классов следующим образом:

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

Вы можете настроить RouterLinkActive, передав exact: true. Это добавит классы только тогда, когда URL точно совпадает со ссылкой.

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

Вы можете назначить экземпляр RouterLinkActive переменной шаблона и напрямую проверить состояние isActive.

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

Наконец, вы можете применить директиву RouterLinkActive к предку RouterLink.

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

Это установит класс active-link в теге div, если URL равен '/user/jim' или '/user/bob'.

Конструктор

constructor(router: Router, element: ElementRef, renderer: Renderer, cdr: ChangeDetectorRef)

Подробности класса

links : QueryList<RouterLink>

linksWithHrefs : QueryList<RouterLinkWithHref>

routerLinkActiveOptions : {exact: boolean}

isActive : boolean

ngAfterContentInit() : void

routerLinkActive

ngOnChanges(changes: SimpleChanges) : void

ngOnDestroy() : void

экспортировано из @angular/router/index, определено в @angular/router/src/directives/router_link_active.ts