У Angular, як визначити активний маршрут?

ПРИМІТКА. Тут є багато різних відповідей, і більшість з них були дійсними в той чи інший час. Справа в тому, що те, що працює, змінювалося декілька разів, як команда Angular змінювала свій Маршрутизатор. Маршрутизатор версія 3.0 , яка в кінцевому підсумку буде маршрутизатором в кутових перервах багатьох з цих рішень, але пропонує дуже просте рішення самостійно. Що стосується RC.3, кращим рішенням є використання, як показано у цій відповіді .[routerLinkActive]

У програмі Angular (поточний у версії 2.0.0-beta.0, коли я це пишу), як визначити, яким є поточний активний маршрут?

Я працюю над додатком, який використовує Bootstrap 4, і мені потрібен спосіб позначити навігаційні посилання / кнопки активними, коли в <router-output>тегу відображається їх асоційований компонент .

Я усвідомлюю, що міг би сам підтримувати стан, коли натискати одну з кнопок, але це не охоплює випадки наявності кількох шляхів в одному маршруті (скажімо, головне меню навігації, а також місцеве меню в основному компоненті ).

Будь-які пропозиції чи посилання будуть вдячні. Дякую.

За допомогою нового кутового маршрутизатора ви можете додати [routerLinkActive]="['your-class-name']"атрибут до всіх своїх посилань:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Або спрощений формат без масиву, якщо потрібен лише один клас:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Або ще простіший формат, якщо потрібен лише один клас:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

Див погано документована routerLinkActiveдиректива для отримання додаткової інформації. (Я в основному це з'ясував за допомогою проб і помилок.)

ОНОВЛЕННЯ: routerLinkActiveТепер кращу документацію щодо директиви можна знайти тут . (Завдяки @Victor Уго Аранго А. у коментарях нижче.)

Я відповів на це в іншому запитанні, але вважаю, що це може бути доречно і для цього. Ось посилання на початкову відповідь: Кутовий 2: Як визначити активний маршрут з параметрами?

Я намагався встановити активний клас без того, щоб точно знати, яке поточне місцезнаходження (використовуючи назву маршруту) . Найкраще рішення, до якого я дійшов, - це використовувати функцію isRouteActive, доступну в Routerкласі.

router.isRouteActive(instruction): Booleanприймає один параметр , який є маршрут Instructionоб'єкта і повертає trueабо falseтого , що інструкція справедливо чи ні для поточного маршруту. Ви можете генерувати маршрут Instruction, використовуючи Router" create" (linkParams: Array) . LinkParams дотримується точно такого ж формату, що і значення, передане в директиву routerLink (наприклад router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Ось як може виглядати RouteConfig (я трохи підмітив його, щоб показати використання парам) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

І Вид виглядатиме так:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

Поки що це було моїм переважним рішенням проблеми, воно може бути корисним і для вас.

Я вирішив проблему, з якою зіткнувся в цьому посиланні, і я з’ясував, що для вашого питання є просте рішення. Ви можете використовувати router-link-activeзамість цього у своїх стилях.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

Невелике вдосконалення відповіді @ alex-correia-santos на основі https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

І використовуйте його так:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

Ви можете перевірити поточний маршрут, ввівши Locationоб'єкт у свій контролер і перевіривши path(), наприклад:

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

Вам доведеться спочатку імпортувати його:

import {Location} from "angular2/router";

Потім ви можете використовувати звичайний вираз, щоб співставити шлях, який повертається, щоб побачити, який маршрут активний. Зауважте, що Locationклас повертає нормалізований шлях незалежно від того, який LocationStrategyви використовуєте. Таким чином , навіть якщо ви використовуєте HashLocationStragegyшляху повертаються все ще буде мати вигляд /foo/bar НЕ #/foo/bar

як Ви визначаєте, який саме зараз активний маршрут?

ОНОВЛЕННЯ: оновлено відповідно до Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

побачити більше...

Для позначення активних маршрутів routerLinkActiveможна використовувати

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

Це також працює на інших елементах

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

Якщо часткові збіги також мають бути позначені, використовуйте

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

Наскільки я знаю, exact: falseце буде за замовчуванням у RC.4

Зараз я використовую rc.4 з завантажувальним пристроєм 4, і цей ідеально підходить для мене:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

Це буде працювати для URL: / home

Нижче наведено метод, що використовує RouteData для стильового менюBar елементів залежно від поточного маршруту:

RouteConfig включає дані з вкладкою (поточний маршрут):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

Шматок макета:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Клас:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

Просто подумав, що я додам у приклад, який не використовує жодного машинопису:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

routerLinkActiveЗмінний пов'язано зі змінним шаблоном , а потім повторно використовуватися по мірі необхідності. На жаль, єдиний застереження полягає в тому, що ви не можете мати все це на <section>елементі, як це #homeпотрібно вирішити до удару парсера <section>.

Routerу Angular 2 RC більше не визначаються isRouteActiveта generateметоди.

urlTree - Повертає поточне дерево URL.

createUrlTree(commands: any[], segment?: RouteSegment) - Застосовує масив команд до поточного дерева URL та створює нове дерево URL.

Спробуйте виконати наступне

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

повідомлення, routeSegment : RouteSegmentмає бути введено в конструктор компонента.

Ось повний приклад додавання активного стилю маршруту в кутовій версії, 2.0.0-rc.1який враховує нульові кореневі шляхи (наприклад path: '/')

app.component.ts -> Маршрути

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

Рішення для Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

Станом на Кутовий 8 це працює:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } забезпечує відповідність URL-адресі.

в 2020 році, якщо ви хочете встановити активний клас на елемент, який не має [routerLink] - ви можете просто:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

Ще одне вирішення. Набагато простіше в кутовому маршрутизаторі V3 Alpha. шляхом введення маршрутизатора

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

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

використання

<div *ngIf="routeIsActive('/')"> My content </div>

У Angular2 RC2 ви можете використовувати цю просту реалізацію

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

це додасть класу activeелементу з відповідним URL-адресою, детальніше про нього читайте тут

Нижче наведено відповіді на це питання для всіх версій Angular 2 RC версій, випущених до даної дати:

RC4 і RC3 :

Для застосування класу до посилання або предка посилання:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ home має бути URL-адресою, а не назвою маршруту, оскільки властивість name більше не існує на об’єкті маршруту, як для маршрутизатора v3.

Більше про директиву routerLinkActive за цим посиланням .

Для застосування класу до будь-якого діва на основі поточного маршруту:

• Введіть маршрутизатор в конструктор компонента.
• Користувач router.url для порівняння.

напр

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 і RC1 :

Використовуйте комбінацію router.isRouteActive та class. *. наприклад, застосувати активний клас на основі домашнього маршруту.

Ім'я та URL можуть бути передані в router.generate.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

Використання routerLinkActiveдобре в простих випадках, коли є посилання і ви хочете застосувати деякі класи. Але в більш складних випадках, коли у вас може бути маршрутизатор Посилання або де вам потрібно щось більше, ви можете створити і використовувати трубу :

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

тоді:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

і не забудьте включити трубу в залежності від труб;)

Для кутової версії 4+ вам не потрібно використовувати жодне складне рішення. Ви можете просто використовувати [routerLinkActive]="'is-active'".

Для прикладу з bootstrap 4 nav link:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

Екземпляр класу маршрутизаторів насправді є спостережуваним і він повертає поточний шлях щоразу, коли змінюється. Ось як я це роблю:

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

А потім у моєму HTML:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

Як було сказано в одному з коментарів прийнятої відповіді, routerLinkActiveдиректива також може бути застосована до контейнера фактичного <a>тегу.

Так, наприклад, із вкладками завантаження Twitter Twitter, де активний клас слід застосувати до <li>тегу, що містить посилання:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Досить акуратно! Я припускаю, що директива перевіряє вміст тегу і шукає <a>тег із routerLinkдирективою.

Просте рішення для кутових 5 користувачів - просто додати routerLinkActiveдо пункту списку.

routerLinkActiveДиректива пов'язана з маршрутом черезrouterLink директиву.

Він вводить як вхід масив класів, до яких додасть елемент, до якого він приєднаний, якщо маршрут зараз активний, наприклад:

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

Вищенаведене додасть клас активних тегів прив’язки, якщо ми зараз переглядаємо домашній маршрут.

А в останній версії кутового ви можете просто зробити перевірку router.isActive(routeNameAsString). Наприклад див. Приклад нижче:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

І переконайтеся, що ви не забуваєте про введення маршрутизатора у свій компонент.

Я шукав спосіб використання Twitter Bootstrap стилю nav з Angular2, але у мене виникли проблеми з отриманням active застосуванням класу до батьківського елемента обраного посилання. Виявив, що рішення @ alex-correia-santos прекрасно працює!

Компонент, що містить ваші вкладки, повинен імпортувати маршрутизатор і визначити його у своєму конструкторі, перш ніж ви зможете здійснити необхідні дзвінки.

Ось спрощена версія моєї реалізації ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

скажімо, ви хочете додати CSS до мого активного стану / вкладки. Використовуйте routerLinkActive, щоб активувати ваше маршрутизаційне посилання.

Примітка: "активно" - це назва мого класу

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

Я використовую кутовий маршрутизатор, ^3.4.7і у мене все ще виникають проблеми з routerLinkActiveдирективою.

Це не працює, якщо у вас є декілька посилань з одним і тим же URL-адресом плюс він, здається, не постійно оновлюється.

Натхненний відповіддю @tomaszbak, я створив невеликий компонент, щоб виконувати цю роботу

Чистий HTML-шаблон схожий

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

почніть з імпорту RouterLinkActive у ваші .ts

імпорт {RouterLinkActive} з "@ angular / router";

Тепер використовуйте RouterLinkActive у своєму HTML

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

надайте деякий css до класу "class_Name", тому що коли це посилання буде активним / клацанням, ви знайдете цей клас протягом періоду перевірки.

Програмним способом було б це зробити в самому компоненті. Я боровся три тижні над цим питанням, але відмовився від кутових документів і прочитав фактичний код, який зробив маршрутизаторну роботу і Thats про найкращі документи, які я можу знайти.

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

Примітка .
Для програмного способу обов’язково додайте посилання-маршрутизатор, і він потребує дочірнього елемента. Якщо ви хочете змінити це, вам потрібно позбутися дітей superclass.nativeElement.