注意： 这里有许多不同的答案，而且大多数都曾经有效。事实是，随着 Angular 团队改变了它的路由器，有效的方法已经改变了很多次。最终将成为 Angular 路由器的 Router 3.0 版本打破了许多这些解决方案，但提供了一个非常简单的解决方案。从 RC.3 开始，首选的解决方案是使用此答案[routerLinkActive]中所示的方法。
在一个 Angular 应用程序中（在我写这篇文章时，当前版本为 2.0.0-beta.0），你如何确定当前活动的路由是什么？
我正在开发一个使用 Bootstrap 4 的应用程序，我需要一种方法来将导航链接/按钮标记为活动，当它们的关联组件显示在<router-output>标签中时。
我意识到当单击其中一个按钮时我可以自己维护状态，但这不包括在同一路径中有多个路径的情况（比如主导航菜单以及主组件中的本地菜单）。
任何建议或链接将不胜感激。谢谢。
使用新的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指令。（我主要是通过反复试验来解决这个问题的。）
routerLinkActive更新：现在可以在这里找到更好的指令文档。（感谢@Victor Hugo Arango A. 在下面的评论中。）
我已经在另一个问题中回答了这个问题，但我相信它也可能与这个问题有关。这是原始答案的链接： Angular 2: How to determine active route with parameters？
我一直在尝试设置活动类，而不必确切知道当前位置是什么（使用路线名称）。到目前为止，我得到的最好的解决方案是使用类中可用的函数isRouteActiveRouter。
router.isRouteActive(instruction): Boolean接受一个参数，该参数是一个路由Instruction对象并返回true或者false该指令对于当前路由是否成立。您可以Instruction使用Router's generate(linkParams: Array) 生成路线。LinkParams 遵循与传递给routerLink指令的值完全相同的格式（例如router.isRouteActive(router.generate(['/User', { user: user.id }]))）。
这就是RouteConfig的样子（我稍微调整了一下以显示参数的用法）：
@RouteConfig([
{ path: '/', component: HomePage, name: 'Home' },
{ path: '/signin', component: SignInPage, name: 'SignIn' },
{ path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])
视图看起来像这样：
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
<a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
<a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>
到目前为止，这一直是我解决该问题的首选解决方案，它也可能对您有所帮助。
基于https://github.com/angular/angular/pull/6407#issuecomment-190179875对 @alex-correia-santos 答案的小幅改进
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>
我解决了我在这个链接中遇到的一个问题，我发现你的问题有一个简单的解决方案。你可以router-link-active在你的风格中使用。
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
Location您可以通过将对象注入控制器并检查来检查当前路由path()，如下所示：
class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
您必须确保先导入它：
import {Location} from "angular2/router";
然后，您可以使用正则表达式匹配返回的路径以查看哪个路由处于活动状态。请注意，无论您使用Location的是哪个类，该类都会返回一个规范化的路径。LocationStrategy所以即使你使用HashLocationStragegy返回的路径仍然是形式/foo/bar not #/foo/bar
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 中的默认设置
您如何确定当前活动的路线是什么？
更新：根据 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
}
现在我正在使用 rc.4 和 bootstrap 4，这个非常适合我：
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home</a>
</li>
这将适用于 url：/home
在 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>
从 Angular 8 开始，这有效：
<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']">Home</a>
</li>
{ exact: true }确保它与 url 匹配。
只是想我会添加一个不使用任何打字稿的示例：
<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
该routerLinkActive变量绑定到模板变量，然后根据需要重新使用。不幸的是，唯一需要注意的是，您不能将所有这些都放在<section>元素上，因为#home需要在解析器命中之前<section>解决。
下面是使用 RouteData 根据当前路由设置 menuBar 项目样式的方法：
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;
}
}
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必须注入到组件的构造函数中。
这是在 Angular 版本中添加活动路由样式的完整示例，2.0.0-rc.1其中考虑了空根路径（例如path: '/'）
app.component.ts -> 路由
import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';
@Component({
moduleId: 'app/',
selector: 'my-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
providers: [UserService],
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/', component: AddCandidatePage },
{ path: 'Login', component: LoginPage }
])
export class AppComponent { //implements OnInit
constructor(private router: Router){}
routeIsActive(routePath: string) {
let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
// e.g. 'Login' or null if route is '/'
let segment = currentRoute == null ? '/' : currentRoute.segment;
return segment == routePath;
}
}
app.component.html
<ul>
<li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
<li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>
Angular2 RC 4 的解决方案：
import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';
export function isRouteActive(router: Router, route: string) {
const currentUrlTree = router.parseUrl(router.url);
const routeUrlTree = router.createUrlTree([route]);
return containsTree(currentUrlTree, routeUrlTree, true);
}
在简单的情况下使用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>
并且不要忘记在管道依赖项中包含管道；）
另一种解决方法。在 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>
在 Angular2 RC2 中，您可以使用这个简单的实现
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这将为具有匹配 url 的元素添加类，请在此处active阅读更多信息
以下是迄今为止发布的所有 Angular 2 RC 版本的这个问题的答案：
RC4 和 RC3：
用于将类应用于链接或链接的祖先：
<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>
/home 应该是 URL 而不是路由的名称，因为从路由器 v3 开始，路由对象上不再存在 name 属性。
更多关于这个链接的 routerLinkActive 指令。
对于基于当前路由的任何 div 应用类：
例如
<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>
对于 Angular 4+ 版本，您不需要使用任何复杂的解决方案。您可以简单地使用[routerLinkActive]="'is-active'".
对于引导程序 4 导航链接的示例：
<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>
在最新版本的 Angular 中，您可以简单地执行 check 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>
并确保您没有忘记在组件中注入路由器。
Router 类的实例实际上是一个 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>
正如已接受答案的评论之一所述，该routerLinkActive指令也可以应用于实际<a>标签的容器。
因此，例如使用 Twitter Bootstrap 选项卡，活动类应应用于<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。
angular 5 用户的简单解决方案是，只需添加routerLinkActive到列表项。
指令通过指令routerLinkActive与路由相关联routerLink。
它将一个类数组作为输入，如果它的路由当前处于活动状态，它将添加到它所附加的元素中，如下所示：
<li class="nav-item"
[routerLinkActive]="['active']">
<a class="nav-link"
[routerLink]="['home']">Home
</a>
</li>
如果我们当前正在查看 home 路由，上面将向锚标签添加一个 active 类。
我正在寻找一种在 Angular2 中使用 Twitter Bootstrap 样式导航的方法，但无法将active类应用于所选链接的父元素。发现@alex-correia-santos 的解决方案效果很好！
包含选项卡的组件必须导入路由器并在其构造函数中定义它，然后才能进行必要的调用。
这是我的实现的简化版本...
import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';
@Component({
selector: 'my-app',
template: `
<ul class="nav nav-tabs">
<li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
<a [routerLink]="['Home']">Home</a>
</li>
<li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
<a [routerLink]="['Login']">Sign In</a>
</li>
<li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
<a [routerLink]="['Feed']">Feed</a>
</li>
</ul>`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
{ path:'/login', component:LoginComponent, name:'Login' },
{ path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
title = 'My App';
constructor( private _r:Router ){}
}
假设您想将 CSS 添加到我的活动状态/选项卡中。使用routerLinkActive激活您的路由链接。
注意：“活动”是我的班级名称
<style>
.active{
color:blue;
}
</style>
<a routerLink="/home" [routerLinkActive]="['active']">Home</a>
<a routerLink="/about" [routerLinkActive]="['active']">About</a>
<a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>
一种编程方式是在组件本身中进行。我在这个问题上挣扎了三周，但放弃了 angular 文档并阅读了使 routerlinkactive 工作的实际代码，这就是我能找到的最好的文档。
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
}
注意：
对于编程方式，请确保添加 router-link 并且它需要一个子元素。如果你想改变这一点，你需要摆脱superclass.nativeElement.
这对我的活动/非活动路线有帮助：
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>
我正在使用角度路由器，但指令^3.4.7仍然存在问题。routerLinkActive
如果您有多个具有相同 url 的链接，并且它似乎不会一直刷新，则它不起作用。
受@tomaszbak 回答的启发，我创建了一个小组件来完成这项工作
纯 html 模板就像
<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a [routerLink]="['/about']" routerLinkActive="active">About us</a>
<a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
首先在您的 .ts 中导入 RouterLinkActive
从'@angular/router'导入{RouterLinkActive}；
现在在你的 HTML 中使用 RouterLinkActive
<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>
为类“class_Name”提供一些css，因为当这个链接将被激活/点击时，你会在检查时发现这个类。