Di Angular, bagaimana Anda menentukan rute aktif?


312

CATATAN: Ada banyak jawaban berbeda di sini, dan sebagian besar telah valid pada satu waktu atau yang lain. Faktanya adalah apa yang berhasil telah berubah beberapa kali karena tim Angular telah mengubah Router-nya. Router versi 3.0 yang pada akhirnya akan menjadi yang router di istirahat Sudut banyak solusi ini, tapi menawarkan solusi yang sangat sederhana sendiri. Pada RC.3, solusi yang lebih disukai adalah menggunakan [routerLinkActive]seperti yang ditunjukkan dalam jawaban ini .

Dalam aplikasi Angular (saat ini dalam rilis 2.0.0-beta.0 saat saya menulis ini), bagaimana Anda menentukan apa rute aktif saat ini?

Saya sedang mengerjakan aplikasi yang menggunakan Bootstrap 4 dan saya perlu cara untuk menandai tautan / tombol navigasi sebagai aktif ketika komponen terkait mereka ditampilkan dalam sebuah <router-output>tag.

Saya menyadari bahwa saya dapat mempertahankan keadaan sendiri ketika salah satu tombol diklik, tetapi itu tidak akan mencakup kasus memiliki beberapa jalur ke rute yang sama (katakanlah menu navigasi utama serta menu lokal di komponen utama ).

Saran atau tautan apa pun akan dihargai. Terima kasih.

Jawaban:


356

Dengan router Angular baru , Anda dapat menambahkan [routerLinkActive]="['your-class-name']"atribut ke semua tautan Anda:

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

Atau format non-array yang disederhanakan jika hanya satu kelas yang dibutuhkan:

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

Atau format yang lebih sederhana jika hanya satu kelas yang dibutuhkan:

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

Lihat arahan yang tidak didokumentasikan dengan baikrouterLinkActive untuk info lebih lanjut. (Saya kebanyakan menemukan ini melalui trial-and-error.)

UPDATE: Dokumentasi yang lebih baik untuk routerLinkActivearahan sekarang dapat ditemukan di sini . (Terima kasih kepada @Victor Hugo Arango A. dalam komentar di bawah ini.)


4
Apakah ada cara untuk mengaktifkannya ketika anak-anak rute aktif? Kode memiliki @inputopsi untuk, tetapi exact: falsemengaktifkan kelas kapan pun saudara rute saat ini juga aktif.
Matej

1
@ GabrieleB-David Saya belum mengujinya, tapi saya akan menganggap itu router.navigate()akan berfungsi dengan baik. routerLinkActivehanyalah indikator apakah tautan ini mewakili rute aktif.
jessepinho

7
Dalam contoh yang diberikan, [routerLinkActive] ditambahkan ke tag <a />, namun, ia juga dapat diletakkan pada elemen lain jika kelas diperlukan di tempat lain. <ul> <li [routerLinkActive] = "['active']"> <a [routerLink[="[myRoute.Route[">
Oblivion2000

2
@jessepinho - Mencobanya - [routerLinkActive] = "'aktif'" hanya akan berfungsi jika Anda juga memiliki [routerLink] di a-tag. Jika Anda memiliki (klik) = "navitageTo ('/ route')" daripada [routerLink], dan dalam fungsi itu, Anda memanggil this.router.navigate (rute), komponen baru akan dimuat tetapi kelas CSS aktif Anda tidak akan menang ' t diterapkan. Saya mencoba melakukan sesuatu yang lain dalam fungsi itu selain this.router.navigate (..).
Mickael Caruso

2
Contoh dalam dokumentasi resmi dapat membantu Anda: angular.io/docs/ts/latest/api/router/index/…
Victor Hugo Arango A.

69

Saya telah menjawab ini dalam pertanyaan lain, tetapi saya percaya ini mungkin relevan dengan yang ini juga. Berikut tautan ke jawaban asli: Angular 2: Cara menentukan rute aktif dengan parameter?

Saya sudah mencoba mengatur aktif kelas tanpa harus tahu persis apa lokasi saat ini (menggunakan nama rute) . Solusi terbaik yang saya dapatkan sejauh ini adalah menggunakan fungsi isRouteActive yang tersedia di Routerkelas.

router.isRouteActive(instruction): Booleanmengambil satu parameter yang merupakan Instructionobjek rute dan mengembalikan trueataufalse apakah instruksi itu berlaku atau tidak untuk rute saat ini. Anda dapat menghasilkan sebuah rute Instructiondengan menggunakan Router's menghasilkan (linkParams: Array) . LinkParams mengikuti format yang sama persis dengan nilai yang diteruskan ke direktif routerLink (misalnya router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Ini adalah bagaimana RouteConfig dapat terlihat (saya telah sedikit mengubahnya untuk menunjukkan penggunaan params) :

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

Dan View akan terlihat seperti ini:

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

Sejauh ini, ini adalah solusi yang saya sukai untuk masalah ini, mungkin juga bermanfaat bagi Anda.


1
Saya pikir solusi ini lebih baik daripada yang diterima karena menggunakan API Angular daripada pencocokan regex jalan. Ini masih agak jelek, akan senang bisa melakukannya router.isRouteActive('Home').
Philip

2
Saya menghadapi beberapa masalah saat mencoba menerapkan solusi, jadi mungkin bagi beberapa orang dapat berguna: stackoverflow.com/questions/35882998/…
Nikita Vlasenko

5
jangan lupa untuk memasukkan Routerkonstruktor kelas
Nikita Vlasenko

2
Dalam versi Angular 2 terbaru yang saya gunakan namebukan asdi objek konfigurasi router.
ComFreek

9
Ini dapat digunakan di rc1 sebagai gantinya:router.urlTree.contains(router.createUrlTree(['Home']))
František Žiačik

35

Saya memecahkan masalah yang saya temui dalam tautan ini dan saya menemukan bahwa ada solusi sederhana untuk pertanyaan Anda. Anda dapat menggunakannya router-link-activesebagai gantinya dalam gaya Anda.

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

2
Saya percaya ini harus menjadi jawaban yang diterima. Router Angular2 akan menambahkan ini secara otomatis untuk Anda.
Gabu

2
sayangnya, kelas itu ditambahkan pada <a>, bukan pada <li>
laifjei

sayangnya itu tidak bekerja dengan baik. saya punya satu menu yang dihasilkan secara dinamis dan router-link-activekelas tidak ditambahkan ke aktif aatau li. tapi ada satu tempat saya menggunakan bootstrap nav-tabsdan berfungsi di sana.
Shri

33

Perbaikan kecil untuk jawaban @ alex-correia-santos berdasarkan 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));
  }
} 

Dan gunakan seperti ini:

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

dan style pada komponen styles : [.active {background-color: aliceblue; } ]. +1 berfungsi
Pratik Kelwalkar

Solusi hebat, dengan ini Anda bisa menjadikan router pribadi.
Kelvin Dealca

Ini adalah solusi yang jauh lebih baik dan sangat berguna untuk pemula yang melupakan hal-hal kecil seperti membuat konstruktor dan meneruskan router! Anda benar-benar layak mendapatkan cek.
Metodologi

30

Anda dapat memeriksa rute saat ini dengan menyuntikkan Locationobjek ke controller Anda dan memeriksa path(), seperti:

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

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

Anda harus memastikan untuk mengimpornya terlebih dahulu:

import {Location} from "angular2/router";

Anda kemudian dapat menggunakan ekspresi reguler untuk mencocokkan dengan jalur yang dikembalikan untuk melihat rute mana yang aktif. Perhatikan bahwa Locationkelas mengembalikan jalur yang dinormalisasi apa pun yang LocationStrategyAnda gunakan. Jadi, bahkan jika Anda menggunakan HashLocationStragegyjalur yang dikembalikan masih dalam bentuk /foo/bar tidak #/foo/bar


17

bagaimana Anda menentukan apa rute aktif saat ini?

UPDATE: diperbarui sesuai 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
}

lihat lebih lanjut ...


14

Untuk menandai rute aktif routerLinkActivedapat digunakan

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

Ini juga berfungsi pada elemen lain seperti

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

Jika sebagian kecocokan juga harus ditandai, gunakan

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

Sejauh yang saya tahu exact: falseakan menjadi default di RC.4


11

Saat ini saya menggunakan rc.4 dengan bootstrap 4 dan ini berfungsi sempurna untuk saya:

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

Ini akan berfungsi untuk url: / home


Apa tujuan dari opsi yang tepat? Apakah itu membuatnya tidak cocok dengan sub-jalur seperti /home/whatever?
Michael Oryl

ya, exactmaksudnya, rute itu akan memiliki nama yang sama. Dan ini diperlukan jika Anda berencana menggunakannya dengan alat seperti twitter bootstrap. Ini sudah menangani status tautan aktif dan tanpa exactopsi tidak akan berfungsi. (tidak yakin tentang bagaimana cara kerjanya pada intinya, saya telah mencobanya dan itu bekerja untuk saya)
Artem Zinoviev

7

Di bawah ini adalah metode menggunakan RouteData ke menu styleBar item tergantung dari rute saat ini:

RouteConfig termasuk data dengan tab (rute saat ini):

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

Sepotong tata letak:

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

Kelas:

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

7

Saya pikir saya akan menambahkan contoh yang tidak menggunakan naskah apa pun:

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

The routerLinkActivevariabel terikat ke variabel template dan kemudian kembali digunakan sebagai diperlukan. Sayangnya satu-satunya peringatan adalah bahwa Anda tidak dapat memiliki semua ini pada <section>elemen karena #homeperlu diselesaikan sebelum parser memukul <section>.


Solusi sempurna untuk menerapkan kondisi pada rute aktif. Di mana @ angular / router atau yang lain tidak berfungsi.
Rohit Parte

Wow, ini sangat membantu. Terima kasih!
Yulian

6

Routerdi Angular 2 RC tidak lagi mendefinisikan isRouteActivedan generatemetode.

urlTree - Mengembalikan pohon url saat ini.

createUrlTree(commands: any[], segment?: RouteSegment) - Menerapkan berbagai perintah ke pohon url saat ini dan membuat pohon url baru.

Coba ikuti

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

perhatikan, routeSegment : RouteSegmentharus disuntikkan ke konstruktor komponen.


6

Berikut adalah contoh lengkap untuk menambahkan styling rute aktif dalam versi Angular 2.0.0-rc.1yang memperhitungkan jalur akar nol akun (mis. path: '/')

app.component.ts -> Rute

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>

6

Solusi untuk 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);
}

5

Pada Angular 8, ini berfungsi:

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

{ exact: true } memastikan cocok dengan url.


5

pada tahun 2020 jika Anda ingin mengatur kelas aktif pada elemen yang tidak memiliki [routerLink] - Anda dapat melakukannya dengan mudah:

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

Terima kasih, Igor. Ini solusi terbaik.
Dmitry Grinko

Terima kasih atas tanggapan Anda :)
Kurkov Igor

4

Solusi Lain. Jauh lebih mudah di Angular Router V3 Alpha. dengan menyuntikkan Router

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

export class AppComponent{

    constructor(private router : Router){}

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

pemakaian

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

segera setelah saya mengimpornya saya mendapatkan properti Cannot read 'isSkipSelf' of null error. ada ide?
atsituab

4

Di Angular2 RC2 Anda dapat menggunakan implementasi sederhana ini

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

ini akan menambah kelas activeke elemen dengan url yang cocok, baca lebih lanjut di sini


4

Di bawah ini adalah jawaban untuk pertanyaan ini untuk semua versi versi Angular 2 RC yang dirilis hingga saat ini:

RC4 dan RC3 :

Untuk menerapkan kelas ke tautan atau leluhur tautan:

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

/ home harus menjadi URL dan bukan nama rute karena properti nama tidak lagi ada di Route Object pada Router v3.

Lebih lanjut tentang routerLinkActive direktif di tautan ini .

Untuk menerapkan kelas ke div mana pun berdasarkan rute saat ini:

  • Suntikkan Router ke konstruktor komponen.
  • Router.url pengguna untuk perbandingan.

misalnya

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

RC2 dan RC1 :

Gunakan kombinasi router.isRouteActive dan kelas. *. misalnya untuk menerapkan kelas aktif berdasarkan Rute Rumah.

Nama dan url keduanya dapat diteruskan ke router.generate.

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

4

Penggunaan routerLinkActivebagus dalam kasus-kasus sederhana, ketika ada tautan dan Anda ingin menerapkan beberapa kelas. Tetapi dalam kasus yang lebih kompleks di mana Anda mungkin tidak memiliki routerLink atau di mana Anda membutuhkan sesuatu yang lebih, Anda dapat membuat dan menggunakan pipa :

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

kemudian:

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

dan jangan lupa untuk memasukkan pipa ke dalam dependensi pipa;)


Ide bagus tetapi dalam angular2.0.0rc3 saya mengubah this.router.isRouteActive ... ke this._location.path () dan menambahkan ini: import {Location} dari '@ angular / common';
Kamil Kiełczewski

2
Tampaknya ada sesuatu yang hilang dari kode. Di mana containsTreedidefinisikan?
Øystein Amundsen

4

Untuk Angular versi 4+, Anda tidak perlu menggunakan solusi yang rumit. Anda cukup menggunakan [routerLinkActive]="'is-active'".

Sebagai contoh dengan tautan 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>

3

Sebuah instance dari kelas Router sebenarnya adalah Observable dan mengembalikan jalur saat ini setiap kali ia berubah. Beginilah cara saya melakukannya:

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

Dan kemudian di HTML saya:

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

1
.subscribe tidak tersedia pada instance Router.
Shivang Gupta

3

Seperti disebutkan dalam salah satu komentar dari jawaban yang diterima, routerLinkActivearahan juga dapat diterapkan pada wadah <a>tag yang sebenarnya .

Jadi misalnya dengan tab Bootstrap Twitter tempat kelas aktif harus diterapkan ke <li>tag yang berisi tautan:

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

Cukup rapi! Saya kira arahan memeriksa konten tag dan mencari <a>tag dengan routerLinkarahan.


2

Solusi sederhana untuk pengguna sudut 5 adalah, cukup tambahkan routerLinkActiveke item daftar.

Sebuah routerLinkActivedirektif dikaitkan dengan rute melaluirouterLink direktif.

Dibutuhkan sebagai input array kelas yang akan ditambahkan ke elemen yang dilampirkan jika rute saat ini aktif, seperti:

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

Di atas akan menambahkan kelas aktif ke tag jangkar jika kita saat ini melihat rute rumah.

Demo


2

Dan dalam versi sudut terbaru, Anda cukup melakukan pengecekan router.isActive(routeNameAsString). Sebagai contoh, lihat contoh di bawah ini:

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

Dan pastikan Anda tidak melupakan router injeksi di komponen Anda.


1

Saya sedang mencari cara untuk menggunakan gaya Bootstrap Twitter nav dengan Angular2, tetapi kesulitan mendapatkan active kelas yang diterapkan pada elemen induk dari tautan yang dipilih. Menemukan bahwa solusi @ alex-correia-santos bekerja dengan sempurna!

Komponen yang berisi tab Anda harus mengimpor perute dan menentukannya dalam konstruktornya sebelum Anda dapat melakukan panggilan yang diperlukan.

Berikut ini adalah versi implementasi saya yang disederhanakan ...

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

1

katakanlah Anda ingin menambahkan CSS ke status / tab aktif saya. Gunakan routerLinkActive untuk mengaktifkan tautan perutean Anda.

catatan: 'aktif' adalah nama kelas saya di sini

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

0

Saya menggunakan router sudut ^3.4.7dan saya masih mengalami masalah dengan routerLinkActivearahan.

Ini tidak berfungsi jika Anda memiliki banyak tautan dengan url yang sama plus sepertinya tidak menyegarkan sepanjang waktu.

Terinspirasi oleh @tomaszbak, saya membuat komponen kecil untuk melakukan pekerjaan


0

Seperti template html murni

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

0

mulai dengan mengimpor RouterLinkActive di .ts Anda

impor {RouterLinkActive} dari '@ angular / router';

Sekarang gunakan RouterLinkActive di HTML Anda

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

berikan beberapa css ke kelas "class_Name", karena ketika tautan ini akan aktif / diklik Anda akan menemukan kelas ini pada rentang waktu inspeksi.


0

Cara terprogram akan melakukannya dalam komponen itu sendiri. Saya berjuang tiga minggu dalam masalah ini, tetapi menyerah pada dokumen sudut dan membaca kode aktual yang membuat routerlinkactive berfungsi dan Thats tentang dokumen terbaik yang dapat saya temukan.

    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
}

Catatan :
Untuk cara yang terprogram, pastikan untuk menambahkan tautan router dan membutuhkan elemen turunan. Jika Anda ingin mengubahnya, Anda harus menyingkirkan anak-anak superclass.nativeElement.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.