RouterLinkActive

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

API

class RouterLinkActive implements OnChanges ,OnDestroy ,AfterContentInit {
  constructor(router: Router, element: ElementRef<any>, renderer: Renderer2, cdr: ChangeDetectorRef): RouterLinkActive;
  links: QueryList<RouterLink>;
  readonly isActive: boolean;
  @Input() routerLinkActiveOptions: { exact: boolean; } | Partial<IsActiveMatchOptions>;
  @Input() ariaCurrentWhenActive?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
  readonly @Output() isActiveChange: EventEmitter<boolean>;
  @Input() set routerLinkActive(value: string | string[]);
}

constructor

RouterLinkActive

@paramrouterRouter

@paramelementElementRef<any>

@paramrendererRenderer2

@paramcdrChangeDetectorRef

@returnsRouterLinkActive

links

QueryList<RouterLink>

isActive

boolean

routerLinkActiveOptions

{ exact: boolean; } | Partial<IsActiveMatchOptions>

Параметры для настройки определения активности ссылки маршрутизатора.

Эти параметры передаются функции isActive().

ariaCurrentWhenActive

Атрибут aria-current, который применяется, когда ссылка маршрутизатора активна.

isActiveChange

EventEmitter<boolean>

Можно использовать выходное свойство isActiveChange, чтобы получать уведомления каждый раз, когда ссылка становится активной или неактивной.

Выдаёт: true -> маршрут активен false -> маршрут неактивен

<a
 routerLink="/user/bob"
 routerLinkActive="active-link"
 (isActiveChange)="this.onRouterLinkActive($event)">Bob</a>

string | string[]

Описание

Используйте эту директиву, чтобы визуально выделить элементы, связанные с активным маршрутом. Например, следующий код подсвечивает слово «Bob», когда маршрутизатор активирует соответствующий маршрут:

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

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

Можно задать несколько классов, указав их через пробел или передав массив. Например:

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

Чтобы добавлять классы только при точном совпадении URL-адреса со ссылкой, добавьте параметр exact: true:

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

Чтобы напрямую проверить состояние isActive ссылки, присвойте экземпляр RouterLinkActive переменной шаблона. Например, в следующем примере проверяется состояние без назначения CSS-классов:

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

Директиву RouterLinkActive можно применить к родительскому элементу связанных элементов. Например, в следующем примере класс active-link задаётся родительскому тегу <div>, если URL-адрес равен '/user/jim' или '/user/bob'.

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

Директиву RouterLinkActive также можно использовать для установки атрибута aria-current, чтобы предоставить пользователям с нарушениями зрения альтернативный способ различать активные элементы.

Например, следующий код добавляет класс 'active' к ссылке на главную страницу, когда она активна, и в этом случае также устанавливает для её атрибута aria-current значение 'page':

<a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home Page</a>

ПРИМЕЧАНИЕ: RouterLinkActive — это запрос ContentChildren. Запросы дочерних элементов содержимого не находят элементы или директивы в шаблонах других компонентов, поскольку шаблон компонента всегда является чёрным ящиком для его предков.

Экспортируется модулем

RouterModule