ในเชิงมุมคุณจะกำหนดเส้นทางที่ใช้งานได้อย่างไร


312

หมายเหตุ: มีคำตอบต่าง ๆ มากมายที่นี่และส่วนใหญ่ใช้ได้ในครั้งเดียวหรืออย่างอื่น ความจริงก็คือสิ่งที่ได้ผลมีการเปลี่ยนแปลงหลายครั้งเนื่องจากทีม Angular ได้เปลี่ยนเราเตอร์ เราเตอร์เวอร์ชัน 3.0 ที่ในที่สุดจะเป็นเราเตอร์ใน Angular จะแบ่งการแก้ปัญหาเหล่านี้ออกเป็นจำนวนมาก แต่นำเสนอโซลูชันที่เรียบง่ายของตัวเอง ตั้งแต่ RC.3 โซลูชันที่ต้องการคือใช้[routerLinkActive]ดังที่แสดงในคำตอบนี้

ในแอปพลิเคชันเชิงมุม (ปัจจุบันในรุ่น 2.0.0-beta.0 ขณะที่ฉันเขียน) คุณจะทราบได้อย่างไรว่าเส้นทางที่ใช้งานอยู่ในปัจจุบันคืออะไร?

ฉันกำลังทำงานกับแอพที่ใช้ Bootstrap 4 และฉันต้องการวิธีทำเครื่องหมายลิงก์ / ปุ่มการนำทางเป็นแอคทีฟเมื่อองค์ประกอบที่เกี่ยวข้องแสดงใน<router-output>แท็ก

ฉันรู้ว่าฉันสามารถรักษาสถานะของตัวเองได้เมื่อมีการคลิกปุ่มใดปุ่มหนึ่ง แต่นั่นไม่ครอบคลุมถึงกรณีที่มีหลายเส้นทางในเส้นทางเดียวกัน (พูดเมนูนำทางหลักเช่นเดียวกับเมนูท้องถิ่นในองค์ประกอบหลัก )

คำแนะนำหรือลิงค์ใด ๆ จะได้รับการชื่นชม ขอบคุณ

คำตอบ:


355

ด้วยเราเตอร์ Angularใหม่คุณสามารถเพิ่มแอ[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สำหรับข้อมูลเพิ่มเติม (ฉันคิดว่าส่วนใหญ่นี้ผ่านการทดลองและข้อผิดพลาด)

UPDATE: เอกสารที่ดีกว่าสำหรับrouterLinkActiveคำสั่งนี้สามารถพบได้ที่นี่ (ขอบคุณ @Victor Hugo Arango A. ในความคิดเห็นด้านล่าง)


4
มีวิธีใดบ้างไหมที่จะเปิดใช้งานเมื่อเด็ก ๆ ของเส้นทางเปิดใช้งานอยู่ รหัสมี@inputตัวเลือกสำหรับ แต่exact: falseเปิดใช้งานคลาสเมื่อใดก็ตามที่พี่น้องของเส้นทางปัจจุบันใช้งานอยู่
Matej

1
@ GabrieleB- เดวิดฉันยังไม่ได้ทดสอบ แต่ฉันคิดว่าrouter.navigate()มันใช้ได้ดี routerLinkActiveเป็นเพียงตัวบ่งชี้ว่าลิงค์นี้แสดงเส้นทางที่ใช้งานอยู่หรือไม่
jessepinho

7
ในตัวอย่างที่กำหนด [routerLinkActive] จะถูกเพิ่มลงในแท็ก <a /> อย่างไรก็ตามสามารถใส่องค์ประกอบอื่น ๆ ได้หากต้องการคลาสที่อื่น <ul> <li [routerLinkActive] = "['active']"> <a [routerLink เหมือน="هmyMyRoute.Routeonymous">
Oblivion2000

2
@jessepinho - พยายามแล้ว - [routerLinkActive] = "'active'" จะใช้ได้ถ้าคุณมี [routerLink] ใน a-tag ด้วย หากคุณมี (คลิก) = "navitageTo ('/ เส้นทาง')" แทน [routerLink] และในหน้าที่นั้นคุณเรียกว่า this.router.navigate (เส้นทาง) ส่วนประกอบใหม่จะโหลด แต่คลาส CSS ที่ใช้งานของคุณจะชนะ ' t ถูกนำไปใช้ ฉันกำลังลองทำอย่างอื่นในฟังก์ชันนั้นนอกเหนือจากนี้
Mickael Caruso

2
ตัวอย่างในเอกสารประกอบอย่างเป็นทางการสามารถช่วยคุณได้: angular.io/docs/ts/latest/api/router/index/ ......
Victor Hugo Arango A.

69

ฉันได้ตอบคำถามนี้ในคำถามอื่น แต่ฉันเชื่อว่ามันอาจเกี่ยวข้องกับคำถามนี้เช่นกัน นี่คือลิงค์ไปยังคำตอบดั้งเดิม: Angular 2: วิธีการกำหนดเส้นทางที่ใช้งานด้วยพารามิเตอร์?

ฉันได้รับการพยายามที่จะตั้งค่าการใช้งานระดับโดยไม่ต้องรู้ว่าสิ่งที่เป็นที่ตั้งปัจจุบัน(โดยใช้ชื่อเส้นทาง) ทางออกที่ดีที่สุดที่ฉันได้รับจนถึงขณะนี้คือการใช้ฟังก์ชันisRouteActiveในRouterคลาส

router.isRouteActive(instruction): Booleanรับพารามิเตอร์หนึ่งซึ่งเป็นInstructionวัตถุเส้นทางและส่งคืนtrueหรือfalseไม่ว่าคำสั่งนั้นเก็บจริงหรือไม่สำหรับเส้นทางปัจจุบัน คุณสามารถสร้างเส้นทางInstructionโดยใช้Router's สร้าง (linkParams: อาร์เรย์) LinkParams ตามรูปแบบที่แน่นอนเช่นเดียวกับค่าที่ส่งผ่านคำสั่งrouterLink (เช่นrouter.isRouteActive(router.generate(['/User', { user: user.id }])))

นี่คือลักษณะของRouteConfig ที่ดูเหมือน(ฉันได้บิดมันเล็กน้อยเพื่อแสดงการใช้ params) :

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

นี่เป็นวิธีแก้ไขปัญหาที่ฉันต้องการสำหรับตอนนี้อาจเป็นประโยชน์สำหรับคุณเช่นกัน


1
ฉันคิดว่าวิธีนี้ดีกว่าวิธีที่ยอมรับเนื่องจากใช้ Angular API แทนการจับคู่ regex พา ธ มันยังค่อนข้างน่าเกลียดอยู่ดีถ้าทำได้router.isRouteActive('Home')ดี
Philip

2
ฉันพบปัญหาบางอย่างเมื่อพยายามใช้โซลูชันดังนั้นอาจมีประโยชน์สำหรับบางคน: stackoverflow.com/questions/35882998/…
Nikita Vlasenko

5
ไม่ควรลืมใส่คอนRouterสตรัคเตอร์ในชั้นเรียน
Nikita Vlasenko

2
ใน Angular 2 รุ่นล่าสุดที่ฉันใช้nameแทนasในวัตถุกำหนดค่าเราเตอร์
ComFreek

9
สามารถใช้ใน rc1 แทน:router.urlTree.contains(router.createUrlTree(['Home']))
FrantišekŽiačik

35

ฉันแก้ไขปัญหาที่พบในลิงก์นี้และพบว่ามีวิธีแก้ไขปัญหาง่ายๆสำหรับคำถามของคุณ คุณสามารถใช้router-link-activeแทนในสไตล์ของคุณ

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

2
ฉันเชื่อว่านี่ควรเป็นคำตอบที่ยอมรับได้ เราเตอร์ของ Angular2 จะเพิ่มสิ่งนี้ให้คุณโดยอัตโนมัติ
Gabu

2
น่าเสียดายที่คลาสนั้นเพิ่มใน <a> ไม่ใช่ใน <li>
laifjei

น่าเสียดายที่มันใช้งานไม่ได้ ฉันมีเมนูหนึ่งที่สร้างแบบไดนามิกและrouter-link-activeชั้นไม่ได้ถูกเพิ่มลงในการใช้งานหรือa liแต่มีที่เดียวที่ฉันใช้ bootstrap nav-tabsและมันทำงานได้ที่นั่น
Shri

33

การปรับปรุงเล็กน้อยสำหรับคำตอบ @ 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>

และสไตล์ในองค์ประกอบ. styles : [active {background-color: aliceblue; } ]. +1 ใช้งานได้
Pratik Kelwalkar

ทางออกที่ยอดเยี่ยมด้วยสิ่งนี้คุณสามารถทำให้เราเตอร์เป็นส่วนตัว
เคลวิน Dealca

นี่เป็นทางออกที่ดีกว่ามากและมีประโยชน์อย่างยิ่งสำหรับผู้ที่ลืมสิ่งเล็ก ๆ น้อย ๆ เช่นการสร้างคอนสตรัคเตอร์และส่งผ่านเราเตอร์! คุณสมควรได้รับเช็คทั้งหมด
ระเบียบวิธี

30

คุณสามารถตรวจสอบเส้นทางปัจจุบันโดยการฉีดLocationวัตถุเข้าไปในคอนโทรลเลอร์ของคุณและตรวจสอบpath()ดังนี้:

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

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

คุณจะต้องนำเข้าก่อน:

import {Location} from "angular2/router";

จากนั้นคุณสามารถใช้นิพจน์ทั่วไปเพื่อจับคู่กับเส้นทางที่ถูกส่งคืนเพื่อดูเส้นทางที่ใช้งานอยู่ โปรดทราบว่าLocationคลาสจะส่งคืนพา ธ ที่ทำให้เป็นมาตรฐานโดยไม่คำนึงถึงสิ่งที่LocationStrategyคุณใช้ ดังนั้นแม้ว่าคุณจะใช้HashLocationStragegyเส้นทางที่ส่งคืนจะยังคงอยู่ในรูปแบบที่/foo/bar ไม่ #/foo/bar


17

คุณจะทราบได้อย่างไรว่าเส้นทางที่ใช้งานอยู่ในปัจจุบันคืออะไร?

UPDATE: อัปเดตตาม 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
}

ดูเพิ่มเติม...


14

เพื่อทำเครื่องหมายเส้นทางที่ใช้งาน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


11

ตอนนี้ฉันกำลังใช้ rc.4 กับ bootstrap 4 และอันนี้เหมาะสำหรับฉัน:

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

สิ่งนี้จะใช้ได้กับ url: / home


วัตถุประสงค์ของตัวเลือกที่แน่นอนคืออะไร? สิ่งนี้ทำให้ไม่ตรงกับเส้นทางย่อย/home/whateverหรือไม่?
Michael Oryl

ใช่exactหมายถึงเส้นทางนั้นจะมีชื่อเหมือนกัน และนี่เป็นสิ่งจำเป็นหากคุณวางแผนที่จะใช้กับเครื่องมือเช่น twitter bootstrap มันจัดการกับสถานะลิงค์ที่ใช้งานอยู่และไม่มีexactตัวเลือกจะไม่ทำงาน (ไม่แน่ใจว่ามันทำงานในแกนได้อย่างไรฉันลองแล้วก็ใช้ได้กับฉัน)
Artem Zinoviev

7

ด้านล่างเป็นวิธีการใช้ RouteData ไปยังเมนูสไตล์รายการบาร์ขึ้นอยู่กับเส้นทางปัจจุบัน:

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

7

แค่คิดว่าฉันจะเพิ่มในตัวอย่างที่ไม่ใช้ typescript ใด ๆ :

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

routerLinkActiveตัวแปรถูกผูกไว้กับตัวแปรแม่แบบแล้วกลับมาใช้ใหม่ได้ตามความจำเป็น แต่น่าเสียดายที่ข้อแม้เพียงว่าคุณไม่สามารถมีทั้งหมดนี้ใน<section>องค์ประกอบที่เป็น#homeความต้องการที่จะได้รับการแก้ไขก่อน<section>ที่จะตีตัวแยกวิเคราะห์ที่


โซลูชั่นที่สมบูรณ์แบบสำหรับการใช้เงื่อนไขบนเส้นทางที่ใช้งานอยู่ที่ใด @ angular / เราเตอร์หรืออื่น ๆ ไม่ทำงาน
Rohit Parte

ว้าวนี่มันมีประโยชน์มาก ขอบคุณ!
Yulian

6

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จะต้องฉีดเข้าไปในตัวสร้างของส่วนประกอบ


6

นี่คือตัวอย่างที่สมบูรณ์สำหรับการเพิ่มการกำหนดเส้นทางที่ใช้งานอยู่ในเวอร์ชันเชิงมุม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>

6

คำตอบสำหรับ 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

ในฐานะของเชิงมุม 8 งานนี้:

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

{ exact: true } ทำให้แน่ใจว่าตรงกับ URL


5

ในปี 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>

ขอบคุณอิกอร์ นี่คือทางออกที่ดีที่สุด
Dmitry Grinko

ขอบคุณสำหรับคำติชมของคุณ :)
Kurkov Igor

4

วิธีแก้ปัญหาอื่น ง่ายกว่ามากใน Angular Router 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>

ทันทีที่ฉันนำเข้าฉันได้รับคุณสมบัติไม่สามารถอ่าน 'isSkipSelf' ของข้อผิดพลาดเป็นโมฆะ ความคิดใด ๆ
atsituab

4

ใน Angular2 RC2 คุณสามารถใช้การติดตั้งง่าย ๆ นี้ได้

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

สิ่งนี้จะเพิ่มคลาสactiveให้กับองค์ประกอบที่มี url ที่ตรงกันอ่านเพิ่มเติมได้ที่นี่


4

ด้านล่างนี้เป็นคำตอบสำหรับคำถามนี้สำหรับ Angular 2 RC ทุกรุ่นที่วางจำหน่ายจนถึงปัจจุบัน:

RC4 และ RC3 :

สำหรับการใช้คลาสกับลิงค์หรือบรรพบุรุษของลิงค์:

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

/ home ควรเป็น URL และไม่ใช่ชื่อของเส้นทางเนื่องจากคุณสมบัติของชื่อไม่มีอยู่ใน Route Object เหมือน Router v3

เพิ่มเติมเกี่ยวกับคำสั่ง routerLinkActive ที่ลิงค์นี้

สำหรับการใช้คลาสกับ div ใด ๆ ตามเส้นทางปัจจุบัน:

  • ฉีดเราเตอร์เข้าไปในตัวสร้างของส่วนประกอบ
  • ผู้ใช้ router.url สำหรับการเปรียบเทียบ

เช่น

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

RC2 และ RC1 :

ใช้การรวมกันของ router.isRouteActive และ class. * เช่นเพื่อใช้คลาสที่ใช้งานอยู่ตาม Home Route

สามารถส่งชื่อและ url ไปยัง router.generate ได้

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

4

การใช้routerLinkActiveดีในกรณีง่าย ๆ เมื่อมีลิงก์และคุณต้องการใช้คลาสบางคลาส แต่ในกรณีที่ซับซ้อนมากขึ้นที่คุณไม่อาจมี routerLink หรือที่คุณต้องการสิ่งที่เพิ่มเติมที่คุณสามารถสร้างและใช้ท่อ :

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

และอย่าลืมที่จะรวมท่อในการพึ่งพาท่อ;)


ความคิดที่ดี แต่ใน angular2.0.0rc3 ฉันเปลี่ยน this.router.isRouteActive ... เป็น this._location.path () และวางไว้ด้านบนนี้: นำเข้า {Location} จาก '@ angular / common';
Kamil Kiełczewski

2
ดูเหมือนว่าจะมีบางอย่างหายไปจากรหัส อยู่ที่ไหนcontainsTreeกำหนด?
Øystein Amundsen

4

สำหรับ Angular เวอร์ชัน 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>

3

อินสแตนซ์ของคลาสเราเตอร์นั้นเป็น Observable และส่งคืนพา ธ ปัจจุบันทุกครั้งที่มีการเปลี่ยนแปลง นี่คือวิธีที่ฉันทำ:

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>

1
.subscribe ไม่พร้อมใช้งานบนอินสแตนซ์เราเตอร์
Shivang Gupta

3

ดังที่กล่าวไว้ในหนึ่งในความคิดเห็นของคำตอบที่ยอมรับคำrouterLinkActiveสั่งนั้นยังสามารถนำไปใช้กับคอนเทนเนอร์ของ<a>แท็กจริง

ตัวอย่างเช่นกับแท็บ Bootstrap 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คำสั่ง


2

ทางออกที่ง่ายสำหรับผู้ใช้งานเชิงมุม 5 คือเพียงเพิ่มrouterLinkActiveในรายการ

routerLinkActiveสั่งที่เกี่ยวข้องกับเส้นทางผ่านrouterLinkคำสั่ง

ใช้เป็นอินพุตของคลาสที่จะเพิ่มไปยังองค์ประกอบที่แนบมาหากเส้นทางของมันมีการใช้งานในปัจจุบันเช่น:

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

ด้านบนจะเพิ่มคลาสที่ใช้งานในแท็กจุดยึดหากเรากำลังดูเส้นทางบ้าน

การสาธิต


2

และในรุ่นล่าสุดของเชิงมุมคุณสามารถตรวจสอบ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>

และให้แน่ใจว่าคุณไม่ลืมที่จะฉีดเราเตอร์ในองค์ประกอบของคุณ


1

ฉันกำลังมองหาวิธีที่จะใช้การนำทางสไตล์ Twitter Bootstrap กับ 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 ){}
}

1

สมมติว่าคุณต้องการเพิ่ม CSS ในสถานะ / แท็บที่ใช้งานอยู่ของฉัน ใช้routerLinkActiveเพื่อเปิดใช้งานลิงค์เส้นทางของคุณ

หมายเหตุ: 'active' เป็นชื่อคลาสของฉันที่นี่

<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

ฉันใช้เราเตอร์เชิงมุม^3.4.7และฉันยังคงมีปัญหากับrouterLinkActiveคำสั่ง

มันใช้งานไม่ได้หากคุณมีลิงค์หลายลิงค์ที่มี URL เดียวกัน แต่ดูเหมือนว่าจะไม่รีเฟรชตลอดเวลา

แรงบันดาลใจจาก @tomaszbak คำตอบฉันสร้างองค์ประกอบเล็กน้อยเพื่อทำงาน


0

เทมเพลต html ล้วนๆจะเป็นเช่นนั้น

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

0

เริ่มต้นด้วยการนำเข้า RouterLinkActive ใน. ts ของคุณ

นำเข้า {RouterLinkActive} จาก '@ angular / router';

ตอนนี้ใช้ RouterLinkActive ใน HTML ของคุณ

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

ระบุ CSS บางส่วนให้กับคลาส "class_Name" เช่นเมื่อลิงก์นี้จะใช้งาน / คลิกคุณจะพบชั้นนี้ในช่วงขณะที่การตรวจสอบ


0

วิธีการเขียนโปรแกรมจะทำในองค์ประกอบเอง ฉันพยายามสามสัปดาห์ในเรื่องนี้ แต่ยอมแพ้กับเอกสารเชิงมุมและอ่านรหัสจริงที่ทำให้เราเตอร์ทำงานได้และนั่นเป็นเอกสารที่ดีที่สุดที่ฉันสามารถหาได้

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.