在Angular中，如何确定活动路由?

在简单的情况下使用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 2 RC中的Router不再定义isRouteActive和generate方法。

urlTree -返回当前url树。

createUrlTree(commands: any[], segment?: RouteSegment) -应用命令数组到当前url树并创建一个新的url树。

尝试后

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

注意，routeSegment : RouteSegment必须注入到组件的构造函数中。

Router类的实例实际上是一个可观察对象，它每次改变时都会返回当前路径。我是这样做的:

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>

下面是在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>

使用新的角的路由器，你可以在所有链接中添加[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 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>

可以使用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 RC2中，你可以使用这个简单的实现

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

这将把类active添加到匹配url的元素中，阅读更多关于它的在这里

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

以下是迄今为止发布的所有Angular 2 RC版本对这个问题的答案:

RC4和RC3:

将类应用到link或link的祖先:

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

/home应该是URL，而不是路由的名称，因为name属性在路由器v3不再存在于路由对象中。

更多关于链接的routerLinkActive指令。

基于当前路由将class应用到任何div:

• 将路由器注入组件的构造函数。
• 用户路由器。Url进行比较。

如

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

RC2和RC1:

使用路由器组合。isRouteActive和class.*。例如，基于Home Route应用活动类。

Name和url都可以传递到router.generate中。

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

现在我正在使用rc。4与bootstrap 4和这个对我来说是完美的:

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

这将适用于url: /home

正如在已接受答案的注释中提到的，routerLinkActive指令也可以应用于实际的<a>标记的容器。

因此，例如与Twitter引导标签，其中active类应该应用于包含链接的<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>

非常简洁!我假设该指令检查标记的内容，并使用routerLink指令寻找<a>标记。

我正在使用angular路由器^3.4.7，我仍然有routerLinkActive指令的问题。

这是不工作，如果你有多个链接与相同的url加上它似乎不刷新所有的时间。

受到@tomaszbak答案的启发，我创建了一个小的组件来完成这项工作

让我们说你想添加CSS到我的active state/标签。使用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>

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

我只是想添加一个不使用任何typescript的例子:

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

routerLinkActive变量被绑定到一个模板变量，然后根据需要重新使用。不幸的是，唯一需要注意的是，你不能把这些都放在<section>元素上，因为#home需要从之前解析到解析器击中<section>。

对于angular 5用户来说，简单的解决方案是，将routerLinkActive添加到列表项中。

routerLinkActive指令通过routerLink指令与路由相关联。

它接受一个类数组作为输入，如果它的路由当前是活动的，它将把这些类添加到它所附加的元素中，如下所示:

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

如果我们当前正在查看主路由，上述操作将为锚标记添加一类active。

纯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

import {RouterLinkActive} from '@angular/router';

现在在HTML中使用RouterLinkActive

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

为类“class_Name”提供一些css，因为当这个链接被激活/单击时，你会在span检查时发现这个类。

从Angular 8开始，它可以工作:

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

{ exact: true }确保它匹配url。

在angular的最新版本中，你可以简单地检查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>

确保你没有忘记在你的组件中注入路由器。

在2020年，如果你想在没有[routerLink]的元素上设置active类，你可以简单地做:

<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文档，转而阅读了让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
}

这对我的主动/非主动路线有帮助:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>

< a href = " https://stackoverflow.com/a/41982420/3411787 " > Ref < / >