Trong Angular, làm thế nào để bạn xác định tuyến đường hoạt động?

327
Michael Oryl 2015-12-17 12:37.

LƯU Ý: Có nhiều câu trả lời khác nhau ở đây, và hầu hết đều có giá trị vào lúc này hay lúc khác. Thực tế là những gì hoạt động đã thay đổi nhiều lần khi nhóm Angular đã thay đổi Bộ định tuyến của nó. Phiên bản Router 3.0 mà cuối cùng sẽ là các bộ định tuyến trong phá vỡ góc rất nhiều các giải pháp, nhưng cung cấp một giải pháp rất đơn giản của riêng nó. Đối với RC.3, giải pháp ưu tiên là sử dụng [routerLinkActive]như được hiển thị trong câu trả lời này .

Trong một ứng dụng Angular (hiện tại trong bản phát hành 2.0.0-beta.0 khi tôi viết bài này), làm cách nào để bạn xác định tuyến đường hiện đang hoạt động là gì?

Tôi đang làm việc trên một ứng dụng sử dụng Bootstrap 4 và tôi cần một cách để đánh dấu các liên kết / nút điều hướng là đang hoạt động khi thành phần được liên kết của chúng được hiển thị trong <router-output>thẻ.

Tôi nhận ra rằng tôi có thể tự duy trì trạng thái khi một trong các nút được nhấp vào, nhưng điều đó sẽ không bao gồm trường hợp có nhiều đường dẫn vào cùng một tuyến đường (giả sử menu điều hướng chính cũng như menu cục bộ trong thành phần chính ).

Bất kỳ đề xuất hoặc liên kết sẽ được đánh giá cao. Cảm ơn.

30 answers

381
jessepinho 2016-06-22 04:38.

Với bộ định tuyến Angular mới , bạn có thể thêm một [routerLinkActive]="['your-class-name']"thuộc tính vào tất cả các liên kết của mình:

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

Hoặc định dạng không phải mảng được đơn giản hóa nếu chỉ cần một lớp:

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

Hoặc một định dạng thậm chí còn đơn giản hơn nếu chỉ cần một lớp:

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

Xem chỉ thị được ghi chép kémrouterLinkActive để biết thêm thông tin. (Tôi chủ yếu tìm ra điều này thông qua thử-và-sai.)

CẬP NHẬT: routerLinkActiveHiện có thể tìm thấy tài liệu tốt hơn cho chỉ thị tại đây . (Cảm ơn @Victor Hugo Arango A. trong phần bình luận bên dưới.)

71
Alex Santos 2016-01-03 13:56.

Tôi đã trả lời câu hỏi này trong một câu hỏi khác nhưng tôi tin rằng nó cũng có thể liên quan đến câu hỏi này. Đây là liên kết đến câu trả lời ban đầu: Angular 2: Làm thế nào để xác định tuyến đường hoạt động với các tham số?

Tôi đã cố gắng đặt lớp đang hoạt động mà không cần biết chính xác vị trí hiện tại (sử dụng tên tuyến đường) . Giải pháp tốt nhất mà tôi có được cho đến nay là sử dụng hàm isRouteActive có sẵn trong Routerlớp.

router.isRouteActive(instruction): Booleannhận một tham số là một Instructionđối tượng tuyến và trả về truehoặc falseliệu lệnh đó có đúng hay không đối với tuyến hiện tại. Bạn có thể tạo một tuyến đường Instructionbằng cách sử dụng Router's create (linkParams: Array) . LinkParams tuân theo cùng một định dạng giống như một giá trị được truyền vào một chỉ thị routerLink (ví dụ router.isRouteActive(router.generate(['/User', { user: user.id }])):).

Đây là cách RouteConfig có thể trông như thế nào (Tôi đã chỉnh sửa một chút để hiển thị cách sử dụng các tham số) :

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

Chế độ xem sẽ giống như sau:

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

Đây là giải pháp ưa thích của tôi cho vấn đề này cho đến nay, nó cũng có thể hữu ích cho bạn.

36
Quy Tang 2016-01-16 19:49.

Tôi đã giải quyết một vấn đề mà tôi gặp phải trong Trong Angular 2, lần đầu tiên router.isActiveRoute không hoạt động này và tôi phát hiện ra rằng có một giải pháp đơn giản cho câu hỏi của bạn. Bạn có thể sử dụng router-link-activethay thế trong phong cách của mình.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
34
tomaszbak 2016-03-05 07:24.

Cải tiến nhỏ đối với câu trả lời @ alex-Correia-santos dựa trên 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));
  }
} 

Và sử dụng nó như thế này:

<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>
31
Jason Teplitz 2015-12-17 13:29.

Bạn có thể kiểm tra lộ trình hiện tại bằng cách đưa Locationđối tượng vào bộ điều khiển của mình và kiểm tra path(), như sau:

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

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

Bạn sẽ phải đảm bảo nhập nó trước:

import {Location} from "angular2/router";

Sau đó, bạn có thể sử dụng một biểu thức chính quy để so khớp với đường dẫn được trả về để xem đường nào đang hoạt động. Lưu ý rằng Locationlớp trả về một đường dẫn chuẩn hóa bất kể LocationStrategybạn đang sử dụng đường dẫn nào . Vì vậy, ngay cả khi bạn đang sử dụng HashLocationStragegycác đường dẫn được trả về vẫn sẽ có dạng /foo/bar không #/foo/bar

18
Ankit Singh 2016-04-23 20:44.

làm thế nào để bạn xác định tuyến đường hiện đang hoạt động là gì?

CẬP NHẬT: cập nhật theo 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
}

xem thêm ...

15
Günter Zöchbauer 2016-06-29 19:26.

Để đánh dấu các tuyến đường hoạt động routerLinkActivecó thể được sử dụng

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

Điều này cũng hoạt động trên các yếu tố khác như

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

Nếu Angular 2.0.0-rc3: khớp một phần tuyến với routerLinkActive cũng nên được đánh dấu sử dụng

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

Theo như tôi biết exact: falsethì nó sẽ là mặc định trong RC.4

11
Artem Zinoviev 2016-08-11 02:28.

Ngay bây giờ tôi đang sử dụng rc.4 với bootstrap 4 và cái này hoạt động hoàn hảo cho tôi:

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

Điều này sẽ hoạt động cho url: / home

7
Ivan 2016-04-15 23:07.

Dưới đây là phương pháp sử dụng RouteData để tạo kiểu cho các mục menuBar tùy thuộc vào tuyến đường hiện tại:

RouteConfig bao gồm dữ liệu với tab (tuyến đường hiện tại):

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

Một phần của bố cục:

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

Lớp học:

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
Zze 2018-02-22 00:03.

Tôi chỉ nghĩ rằng tôi sẽ thêm vào một ví dụ không sử dụng bất kỳ kiểu chữ nào:

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

Các routerLinkActivebiến được ràng buộc với một mẫu biến và sau đó tái sử dụng theo yêu cầu. Thật không may, cảnh báo duy nhất là bạn không thể có tất cả điều này trên <section>phần tử vì #homecần được giải quyết trước khi nhấn phân tích cú pháp <section>.

7
Kurkov Igor 2020-01-26 12:12.

vào năm 2020 nếu bạn muốn đặt lớp hoạt động trên phần tử không có [routerLink] - bạn có thể thực hiện đơn giản:

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

6
tchelidze 2016-05-15 21:44.

Routertrong Angular 2 RC không còn định nghĩa isRouteActivegeneratephương thức.

urlTree - Trả về cây url hiện tại.

createUrlTree(commands: any[], segment?: RouteSegment) - Áp dụng một mảng lệnh cho cây url hiện tại và tạo một cây url mới.

Hãy thử làm theo

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

thông báo, routeSegment : RouteSegmentphải được đưa vào hàm tạo của thành phần.

6
Levi Fuller 2016-06-12 07:21.

Dưới đây là một ví dụ đầy đủ để thêm kiểu định tuyến đang hoạt động trong phiên bản Angular 2.0.0-rc.1có tính đến các đường dẫn gốc rỗng (ví dụ path: '/')

app.component.ts -> Routes

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
lukaville 2016-07-13 02:09.

Giải pháp cho 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);
}
6
codejockie 2019-06-30 19:07.

Kể từ Angular 8, điều này hoạt động:

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

{ exact: true } đảm bảo nó khớp với url.

4
shakee93 2016-06-26 01:17.

Một cách giải quyết khác. Dễ dàng hơn nhiều trong Angular Router V3 Alpha. bằng cách tiêm Router

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

export class AppComponent{

    constructor(private router : Router){}

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

sử dụng

<div *ngIf="routeIsActive('/')"> My content </div>
4
Khaled Al-Ansari 2016-07-10 23:44.

Trong Angular2 RC2, bạn có thể sử dụng cách triển khai đơn giản này

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

điều này sẽ thêm lớp activevào phần tử có url phù hợp, đọc thêm về nó tại đây

4
Inderdeep Singh 2016-07-16 00:15.

Dưới đây là câu trả lời cho câu hỏi này cho tất cả các phiên bản Angular 2 RC được phát hành cho đến nay:

RC4 và RC3 :

Để áp dụng lớp để liên kết hoặc tổ tiên của liên kết:

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

/ home phải là URL chứ không phải tên của tuyến đường vì thuộc tính name không còn tồn tại trên Đối tượng Tuyến kể từ Bộ định tuyến v3.

Thông tin thêm về chỉ thị routerLinkActive tại liên kết này .

Để áp dụng lớp cho bất kỳ div nào dựa trên tuyến đường hiện tại:

  • Đưa Router vào hàm khởi tạo của thành phần.
  • Người dùng router.url để so sánh.

ví dụ

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

RC2 và RC1 :

Sử dụng kết hợp router.isRouteActive và class. *. ví dụ: để áp dụng lớp đang hoạt động dựa trên Lộ trình nhà.

Cả tên và url đều có thể được chuyển vào router.generate.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>
4
pleerock 2016-04-30 04:14.

Sử dụng routerLinkActivetốt trong các trường hợp đơn giản, khi có một liên kết và bạn muốn áp dụng một số lớp. Nhưng trong những trường hợp phức tạp hơn, nơi bạn có thể không có RouterLink hoặc khi bạn cần thêm thứ gì đó, bạn có thể tạo và sử dụng đường dẫn :

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

sau đó:

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

và đừng quên bao gồm pipe trong các phụ thuộc của đường ống;)

4
asmmahmud 2017-10-12 00:18.

Đối với phiên bản Angular 4+, bạn không cần sử dụng bất kỳ giải pháp phức tạp nào. Bạn có thể đơn giản sử dụng [routerLinkActive]="'is-active'".

Ví dụ với liên kết 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
Anees Dhansey 2016-05-16 07:50.

Một thể hiện của lớp Router thực sự là một lớp Observable và nó trả về đường dẫn hiện tại mỗi khi nó thay đổi. Đây là cách tôi làm điều đó:

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

Và sau đó trong HTML của tôi:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>
3
Pierre Henry 2016-11-04 05:24.

Như đã đề cập trong một trong các nhận xét của câu trả lời được chấp nhận, lệnh routerLinkActivenày cũng có thể được áp dụng cho vùng chứa của <a>thẻ thực .

Vì vậy, ví dụ với các tab Twitter Bootstrap trong đó lớp hoạt động sẽ được áp dụng cho <li>thẻ có chứa liên kết:

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

Khá gọn gàng! Tôi cho rằng lệnh kiểm tra nội dung của thẻ và tìm kiếm một <a>thẻ có lệnh routerLink.

3
ConductedClever 2019-07-19 23:18.

Và trong phiên bản mới nhất của angle, bạn chỉ cần kiểm tra router.isActive(routeNameAsString). Ví dụ, hãy xem ví dụ bên dưới:

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

Và đảm bảo rằng bạn không quên chèn bộ định tuyến vào thành phần của mình.

2
Prasanth Jaya 2018-04-18 00:19.

Giải pháp đơn giản cho người dùng angle 5 là chỉ cần thêm routerLinkActivevào mục danh sách.

Một routerLinkActivechỉ thị được liên kết với một tuyến đường thông qua một routerLinkchỉ thị.

Nó lấy làm đầu vào một mảng các lớp mà nó sẽ thêm vào phần tử mà nó được gắn vào nếu tuyến của nó hiện đang hoạt động, như sau:

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

Ở trên sẽ thêm một lớp hoạt động vào thẻ liên kết nếu chúng ta hiện đang xem đường về nhà.

1
Ben Thielker 2016-04-14 07:56.

Tôi đang tìm cách sử dụng điều hướng kiểu Twitter Bootstrap với Angular2, nhưng gặp sự cố khi activeáp dụng lớp cho phần tử mẹ của liên kết đã chọn. Nhận thấy rằng giải pháp của @ alex-Correia-santos hoạt động hoàn hảo!

Thành phần chứa các tab của bạn phải nhập bộ định tuyến và xác định nó trong hàm khởi tạo của nó trước khi bạn có thể thực hiện các cuộc gọi cần thiết.

Đây là một phiên bản triển khai đơn giản của tôi ...

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
UniCoder 2017-06-13 03:52.

giả sử bạn muốn thêm CSS vào trạng thái / tab đang hoạt động của tôi. Sử dụng routerLinkActive để kích hoạt liên kết định tuyến của bạn.

lưu ý: 'hoạt động' là tên lớp của tôi ở đây

<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>
1
grant mitchell soundbreakr1 2020-04-08 21:43.

Một cách lập trình sẽ là thực hiện điều đó trong chính thành phần. Tôi đã vật lộn trong ba tuần về vấn đề này, nhưng đã từ bỏ các tài liệu góc cạnh và đọc mã thực tế giúp routerlinkactive hoạt động và Thats về các tài liệu tốt nhất mà tôi có thể tìm thấy.

    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
}

Lưu ý :
Đối với cách lập trình, hãy đảm bảo thêm liên kết bộ định tuyến và nó có một phần tử con. Nếu bạn muốn thay đổi điều đó, bạn cần phải loại bỏ những đứa trẻ trên superclass.nativeElement.

0
RPDeshaies 2017-02-17 10:13.

Tôi đang sử dụng bộ định tuyến góc cạnh ^3.4.7và tôi vẫn gặp sự cố với routerLinkActivechỉ thị.

Nó không hoạt động nếu bạn có nhiều liên kết với cùng một url cộng với nó dường như không làm mới mọi lúc.

Lấy cảm hứng từ câu trả lời @tomaszbak, tôi đã tạo một thành phần nhỏ để thực hiện công việc

0
Bellash 2018-06-23 03:05.

Mẫu html thuần túy giống như

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
0
T. Shashwat 2018-10-15 20:24.

bắt đầu với việc nhập RouterLinkActive trong .ts của bạn

nhập {RouterLinkActive} từ '@ angle / router';

Bây giờ hãy sử dụng RouterLinkActive trong HTML của bạn

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

cung cấp một số css cho lớp "class_Name", vì khi liên kết này hoạt động / được nhấp vào, bạn sẽ tìm thấy lớp này trên span trong khi kiểm tra.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language