[routerLinkActive]
。在Angular应用程序中(我写此书时是2.0.0-beta.0版本中的当前版本),您确定当前处于活动状态的路线是什么?
我正在开发一个使用Bootstrap 4的应用程序,并且需要一种方法来在显示其相关组件时将导航链接/按钮标记为活动状态。一个
<router-output>
标签。我意识到,当单击其中一个按钮时,我可以自己维护状态,但是这不会涵盖将多条路径引入同一条路线的情况(例如导航菜单以及主要组件中的本地菜单。
任何建议或链接将不胜感激。谢谢。
#1 楼
使用新的Angular路由器,您可以将[routerLinkActive]="['your-class-name']"
属性添加到所有链接: /> <a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
或更简单的格式(如果只需要一个类):有关更多信息。 (我主要是通过反复试验来解决这个问题。)
更新:现在可以在此处找到有关
routerLinkActive
指令的更好文档。 (感谢@Victor Hugo Arango A.在下面的评论中。)#2 楼
我在另一个问题中回答了这个问题,但我相信它也可能与此问题相关。这是原始答案的链接:角度2:如何使用参数确定活动路线?
我一直在尝试设置活动类,而不必确切知道当前位置(使用路线名称)。迄今为止,最好的解决方案是使用
Router
类中提供的isRouteActive函数。是否为当前路线。您可以使用router.isRouteActive(instruction): Boolean
的generate(linkParams:Array)生成路由Instruction
。 LinkParams遵循与传递到routerLink指令中的值完全相同的格式(例如true
)。 :@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 API,而不是匹配路径的正则表达式。不过还是有点丑陋,只能够执行router.isRouteActive('Home')会很好。
–菲利普
16年1月7日在22:55
我在尝试实施该解决方案时遇到了一些问题,因此也许对某些问题很有用:stackoverflow.com/questions/35882998/…
– Nikita Vlasenko
16 Mar 9 '16 at 4:54
不应该忘记将Router放在类的构造函数中
– Nikita Vlasenko
16 Mar 9 '16 at 4:55
在最新的Angular 2版本中,我使用名称代替路由器配置对象中的name。
– ComFreek
16 Mar 24 '16 at 9:54
可以在rc1中使用它:router.urlTree.contains(router.createUrlTree(['Home']))
–FrantišekŽiačik
16年5月15日在11:23
#3 楼
我解决了此链接中遇到的问题,发现有一个简单的解决方案可以解决您的问题。您可以在样式中使用router-link-active
。@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
评论
我相信这应该是公认的答案。 Angular2的路由器会自动为您添加。
–加布
16年2月16日在2:39
不幸的是,该类在上添加,而不是在
–laifjei
16年1月1日在9:57
不幸的是,它并不能很好地工作。我有一个动态生成的菜单,并且没有将router-link-active类添加到活动a或li中。但有一个地方我正在使用引导导航选项卡,并且在那里工作。
– Shri
16年4月9日在16:29
#4 楼
基于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));
}
}
评论
以及组件样式中的样式:[.active {background-color:aliceblue; }]。 +1有效
– Pratik Kelwalkar
16-4-15在10:41
很好的解决方案,您可以将路由器设为私有。
–开尔文·迪卡(Kelvin Dealca)
16年6月6日在19:46
这是一个更好的解决方案,对于没有经验的人(尤其是忘记了创建构造函数和传入路由器等小东西的菜鸟)特别有用!您完全值得支票。
–方法论者
16年6月9日在20:35
#5 楼
您可以通过将Location
对象注入控制器并检查path()
来检查当前路线,如下所示:class MyController {
constructor(private location:Location) {}
... location.path(); ...
}
您必须确保先导入它:
import {Location} from "angular2/router";
然后,您可以使用正则表达式来匹配返回的路径,以查看哪个路由处于活动状态。请注意,无论您使用哪个
Location
,LocationStrategy
类都将返回规范化路径。因此,即使您使用的是HashLocationStragegy
,返回的路径仍然是/foo/bar
而不是#/foo/bar
的形式#6 楼
您如何确定当前处于活动状态的路由?
UPDATE:已按照Angular2.4.x更新了。 br />
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
}
查看更多...
#7 楼
要标记活动路径,可以使用routerLinkActive
<a [routerLink]="/user" routerLinkActive="some class list">User</a>
这也适用于其他元素,例如
<div routerLinkActive="some class list">
<a [routerLink]="/user">User</a>
</div>
部分匹配也应标记为使用
据我所知
exact: false
将成为RC.4中的默认值#8 楼
现在我正在使用带有引导程序4的rc.4,这个对我来说很完美:评论
确切选项的目的是什么?这是否使其与/ home / whatever等子路径不匹配?
– Michael Oryl
16年8月11日在9:44
是的,确切的意思是,该路线将具有相同的名称。如果您计划将其与twitter bootstrap之类的工具一起使用,则这是必需的。它已经处理了活动的链接状态,没有确切的选项将无法正常工作。 (不确定它在内核中如何工作,我曾经尝试过并且它对我有用)
– Artem Zinoviev
16年8月11日14:00
#9 楼
以下是使用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;
}
}
#10 楼
只是想我会添加一个不使用任何打字稿的示例:<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>
routerLinkActive
变量绑定到模板变量,然后根据需要重新使用。不幸的是,唯一的警告是您无法在<section>
元素上拥有全部内容,因为在解析器到达#home
之前需要解决<section>
。评论
在活动路线上应用条件的完美解决方案。@ angular / router否则无效。
– Rohit Parte
19年5月3日在18:29
哇,这很有帮助。谢谢!
–玉莲
20 Jan 17 '20 at 12:11
#11 楼
在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>
#12 楼
Angular 2 RC中的Router
不再定义isRouteActive
和generate
方法。urlTree
-返回当前的网址树。createUrlTree(commands: any[], segment?: RouteSegment)
-将命令数组应用于当前的网址树并创建新的网址树。尝试以下操作
<li
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">
注意,必须将
routeSegment : RouteSegment
注入组件的构造函数中。#13 楼
这是在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>
#14 楼
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);
}
#15 楼
从Angular 8开始,此功能有效:#16 楼
另一个解决方法。在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
16年6月25日在16:45
#17 楼
在Angular2 RC2中,您可以使用此简单的实现<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这会将
active
类添加到具有匹配URL的元素中,在此处了解更多信息#18 楼
以下是迄今为止发布的所有Angular 2 RC版本的该问题的答案:用于将类应用于链接或链接的祖先:
<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>
/ home应该是URL,而不是路由的名称,因为从Router v3开始,名称对象不再存在于路由对象上。 >有关此链接上的routerLinkActive指令的更多信息。
用于基于当前路由将类应用于任何div:
将Router注入组件的构造函数。
用户router.url进行比较。
例如g
<nav [class.transparent]="router.url==('/home')">
</nav>
结合使用router.isRouteActive和class。*。例如,根据本地路线应用有效课程。
名称和URL都可以传递到router.generate中。
<li [class.active]="router.isRouteActive(router.generate(['Home']))">
<a [routerLink]="['Home']" >Home</a>
</li>
#19 楼
在简单的情况下,当有链接并且您想应用某些类时,使用routerLinkActive
很好。但是在更复杂的情况下,您可能没有routerLink或需要其他功能,则可以创建和使用管道:br />
@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);
}
}
,不要忘记在管道依赖项中包括管道;)
评论
不错的主意,但是在angular2.0.0rc3中,我将this.router.isRouteActive ...更改为this._location.path(),并放在此之上:
–卡米尔(KamilKiełczewski)
16年6月30日在20:16
代码中似乎缺少了一些东西。在哪里定义containsTree?
–Øystein Amundsen
16年11月3日在8:14
#20 楼
对于Angular 4+版本,您无需使用任何复杂的解决方案。您只需使用[routerLinkActive]="'is-active'"
即可。对于带有bootstrap 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>
#21 楼
在最新版本的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>
并确保您不会忘记在组件中注入路由器。
#22 楼
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>
评论
.subscribe在路由器实例上不可用。
– Shivang Gupta
16年11月26日在14:59
#23 楼
如已接受答案的评论之一所述,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
标记。#24 楼
对于5位用户的简单解决方案是,只需将routerLinkActive
添加到列表项。 routerLinkActive
伪指令与通过routerLink
伪指令的路由相关联。当前处于活动状态,例如:<li class="nav-item"
[routerLinkActive]="['active']">
<a class="nav-link"
[routerLink]="['home']">Home
</a>
</li>
如果我们当前正在查看本国路线,则上面的代码将为锚标签添加一个活动类。 br />
#25 楼
我正在寻找一种将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 ){}
}
#26 楼
假设您要将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>
#27 楼
一种编程方式是在组件本身中执行此操作。我在这个问题上苦苦挣扎了三个星期,但放弃了有角度的文档,而是阅读了使routerlinkactive工作的实际代码,这就是我所能找到的最佳文档。注意:
对于编程方式,请确保添加router-link并带有子元素。如果要更改此设置,则需要删除
superclass.nativeElement
上的子项。#28 楼
我使用的是角形路由器^3.4.7
,而routerLinkActive
指令仍然有问题。 受@tomaszbak的启发,我创建了一个小组件来完成这项工作
#29 楼
纯HTML模板就像 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a [routerLink]="['/about']" routerLinkActive="active">About us</a>
<a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
#30 楼
首先从.ts导入RouterLinkActive开始,从'@ angular / router'导入{RouterLinkActive};
现在在HTML中使用RouterLinkActive
<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>
为类“ class_Name”提供一些CSS,因为当该链接被激活/单击时,您将在检查时跨度找到该类。
评论
路线的子级处于活动状态时,有什么方法可以激活它?代码中有一个@input选项,但确切的说:每当当前路由的同级也处于活动状态时,false激活该类。
–Matej
16年6月26日在10:45
@ GabrieleB-David我还没有测试过,但是我认为router.navigate()可以正常工作。 routerLinkActive只是该链接是否代表活动路由的指示器。
– jessepinho
16年7月7日在10:27
在给定的示例中,[routerLinkActive]被添加到标记中,但是,如果在其他地方需要该类,则也可以将其放置在其他元素上。
–Oblivion2000
16年7月20日在12:16
@jessepinho-尝试过-[routerLinkActive] =“'active'”仅在a-tag中也有[routerLink]时才有效。如果您使用(click)=“ navitageTo('/ route')”而不是[routerLink],并且在该函数中调用了this.router.navigate(route),则将加载新组件,但您的有效CSS类将不会加载不适用。我正在尝试在此函数中执行其他操作,除了this.router.navigate(..)。
–米凯尔·卡鲁索(Mickael Caruso)
16 Jul 24'2:26
官方文档中的示例可以为您提供帮助:angular.io/docs/ts/latest/api/router/index / ...
– Victor Hugo Arango A.
17年1月15日在11:55