W Angular, jak określić trasę aktywną?

Odpowiedziałem na to w innym pytaniu, ale sądzę, że może to być istotne również dla tego. Oto link do oryginalnej odpowiedzi: kąt 2: Jak wyznaczyć trasę aktywną z parametrami?

Próbowałem ustawić klasę active bez konieczności dokładnego określania bieżącej lokalizacji (używając nazwy trasy). Do tej pory najlepszym rozwiązaniem jest użycie funkcji isRouteActive dostępnej w Router klasy.

router.isRouteActive(instruction): Boolean pobiera jeden parametr, którym jest obiekt route Instruction i zwraca true lub false czy ta instrukcja jest prawdziwa czy nie dla bieżącej trasy. Możesz wygenerować trasę Instruction używając Router'S generate(linkParams: Array). LinkParams ma dokładnie taki sam format jak wartość przekazywana do dyrektywy routerLink (np. router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Tak może wyglądać RouteConfig (trochę go podkręciłem, aby pokazać użycie params):

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

I widok wyglądałby tak:

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

To było moje preferowane rozwiązanie problemu do tej pory, to może być pomocne dla Ciebie, jak również.

Rozwiązałem problem, który napotkałem w tym linku i dowiedziałem się, że istnieje proste rozwiązanie twojego pytania. Możesz użyć router-link-active zamiast w swoich stylach.

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

Mała poprawa dla @ alex-correia-santos odpowiedź na podstawie 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));
  }
} 

I użyj go tak:

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

Możesz sprawdzić bieżącą trasę, wstrzykując obiekt Location do kontrolera i sprawdzając path(), w następujący sposób:

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

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

Najpierw musisz upewnić się, że zaimportujesz go:

import {Location} from "angular2/router";

Możesz następnie użyć wyrażenia regularnego, aby dopasować ścieżkę do zwróconej ścieżki, aby zobaczyć, która trasa jest aktywna. Zauważ, że klasa Location zwraca znormalizowaną ścieżkę niezależnie od tego, której LocationStrategy używasz. Więc nawet jeśli używasz HashLocationStragegy zwrócone ścieżki nadal będą miały postać /foo/bar Nie #/foo/bar

Jak określić, jaka jest aktualnie aktywna trasa?

Aktualizacja: zaktualizowano zgodnie z 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
}

Zobacz więcej...

Poniżej znajduje się metoda wykorzystująca RouteData do stylizacji elementów paska menu w zależności od bieżącej trasy:

Routeconfig zawiera dane z tabulatorem (bieżąca trasa):

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

A piece of layout:

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

Klasa:

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

Oto kompletny przykład dodawania active route styling w wersji Angular 2.0.0-rc.1, która uwzględnia null root paths (np. path: '/')

App.komponent.ts - > trasy

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

Rozwiązanie dla 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);
}

Teraz używam rc.4 z bootstrap 4 i ten działa mi idealnie:

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

To zadziała dla url: / home

Do oznaczania aktywnych tras routerLinkActive można użyć

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

Działa to również na innych elementach, takich jak

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

Jeśli częściowe dopasowania należy również zaznaczyć użycie

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

Z tego co wiem exact: false będzie domyślnym w RC.4

Router w Angular 2 RC nie definiuje już metod isRouteActive i generate.

urlTree - zwraca bieżące drzewo adresów url.

createUrlTree(commands: any[], segment?: RouteSegment) - stosuje tablicę poleceń do bieżącego drzewa adresów url i tworzy nowe drzewo adresów url.

Spróbuj podążać

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

zauważ, że routeSegment : RouteSegment musi być wstrzykiwany do konstruktora komponentu.

Instancja klasy routera jest w rzeczywistości obserwowalna i zwraca bieżącą ścieżkę za każdym razem, gdy się zmienia. Tak to robię:

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

A potem w moim HTML:

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

Inne Obejście. Znacznie łatwiej w Angular Router V3 Alpha. przez iniekcję routera

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

export class AppComponent{

    constructor(private router : Router){}

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

Użycie

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

W Angular2 RC2 możesz użyć tej prostej implementacji

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

Spowoduje to dodanie klasy active do elementu z dopasowanym adresem url, przeczytaj więcej o tym tutaj

Poniżej znajdują się odpowiedzi na to pytanie dla wszystkich wersji Angular 2 RC wydanych do dnia dzisiejszego:

RC4 i RC3 :

Do zastosowania klasy do linku lub przodka linku:

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

/dom powinien być adresem URL, a nie nazwą trasy, ponieważ właściwość name nie istnieje już w obiekcie Router v3.

Więcej o dyrektywie routerLinkActive pod tym linkiem .

Do stosowania klasy do dowolnego div na podstawie bieżącej trasy :

• wstrzyknąć Router do konstruktora komponentu.
• Router użytkownika.adres URL do porównania.

E. g

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

RC2 i RC1 :

Użyj kombinacji routera.isRouteActive I class.*. np. aby zastosować active class na podstawie trasy głównej.

Nazwa i adres url mogą być przekazywane do routera./ align = "left" /

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

Użycie routerLinkActive jest dobre w prostych przypadkach, gdy istnieje link i chcesz zastosować niektóre klasy. Ale w bardziej złożonych przypadkach, gdy może nie masz routerLink lub gdzie potrzebujesz czegoś więcej, możesz utworzyć i użyć rury :

@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);
    }
}

Wtedy:

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

I nie zapomnij dodać pipe do zależności rur;)

Jak wspomniano w jednym z komentarzy zaakceptowanej odpowiedzi, dyrektywa routerLinkActive może być również zastosowana do kontenera rzeczywistego znacznika <a>.

Więc na przykład z zakładkami Twitter Bootstrap gdzie aktywna klasa powinna być zastosowana do znacznika <li> zawierającego link:

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

W wersji kątowej 4+ nie trzeba używać żadnych skomplikowanych rozwiązań. Możesz po prostu użyć [routerLinkActive]="'is-active'".

Dla przykładu z linkiem bootstrap 4 nav:

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

Pomyślałem, że dodam przykład, który nie używa żadnego maszynopisu:

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

Zmienna routerLinkActive jest powiązana ze zmienną szablonową, a następnie ponownie używana w razie potrzeby. Niestety jedynym zastrzeżeniem jest to, że nie możesz mieć tego wszystkiego na elemencie <section>, ponieważ #homemusi być rozwiązane przed do parsera uderzającego <section>.

Szukałem sposobu na użycie stylu Bootstrap Twittera z Angular2, ale miałem problem z zastosowaniem klasy active do elementu nadrzędnego wybranego linku. Okazało się, że rozwiązanie @alex-correia-santos działa idealnie!

Komponent zawierający tabulatory musi zaimportować router i zdefiniować go w jego konstruktorze, zanim będzie można wykonać niezbędne połączenia.

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 ){}
}

Załóżmy, że chcesz dodać CSS do mojego aktywnego stanu / karty. Użyj routerLinkActive , aby aktywować łącze routingu.

uwaga: 'active' to nazwa mojej klasy

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

Używam routera angular ^3.4.7 i nadal mam problemy z dyrektywą routerLinkActive.

To nie działa, jeśli masz wiele linków z tym samym adresem url i nie wydaje się, aby odświeżać cały czas.

Zainspirowany @tomaszbak odpowiedz stworzyłem mały komponent do wykonania zadania

Proste rozwiązanie dla użytkowników angular 5 jest, wystarczy dodać routerLinkActive do pozycji listy.

A routerLinkActive dyrektywa jest związana z drogą za pośrednictwem routerLink dyrektywy.

Przyjmuje jako wejście tablicę klas, które dodaje do elementu, do którego jest dołączona, jeśli jego trasa jest aktualnie aktywna, tak:

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

Powyższe spowoduje dodanie klasy active do znacznika kotwicy, jeśli aktualnie oglądamy trasę główną.

Czysty szablon html bądź jak

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