注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
我在另一个问题中回答过这个问题，但我相信它可能也与这个问题有关。以下是原始答案的链接: Angular 2:如何用参数确定活动路由?
我一直在尝试设置活动类，而不必确切地知道当前位置(使用路由名)。到目前为止，我得到的最好的解决方案是使用路由器类中的isRouteActive函数。
isrouteactive(指令):布尔值接受一个参数，该参数是一个路由指令对象，并返回true或false，不管该指令对当前路由是否为真。你可以使用路由器的generate(linkParams: Array)来生成路由指令。LinkParams遵循与传入routerLink指令的值完全相同的格式(例如router. isrouteactive (router. isrouteactive))。生成(['/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>
到目前为止，这是我对这个问题的首选解决方案，它可能对你也有帮助。
其他回答
一种程序化的方式是在组件本身中完成。我在这个问题上挣扎了三周，但最终放弃了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上去掉子元素。
在简单的情况下，当有一个链接并且你想应用一些类时，使用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.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>
确保你没有忘记在你的组件中注入路由器。
首先在.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 2:如何用参数确定活动路由?
我一直在尝试设置活动类，而不必确切地知道当前位置(使用路由名)。到目前为止，我得到的最好的解决方案是使用路由器类中的isRouteActive函数。
isrouteactive(指令):布尔值接受一个参数，该参数是一个路由指令对象，并返回true或false，不管该指令对当前路由是否为真。你可以使用路由器的generate(linkParams: Array)来生成路由指令。LinkParams遵循与传入routerLink指令的值完全相同的格式(例如router. isrouteactive (router. isrouteactive))。生成(['/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>
到目前为止，这是我对这个问题的首选解决方案，它可能对你也有帮助。
