注意:这里有许多不同的答案,大多数在某个时期是有效的。事实上,随着Angular团队对路由器的改变,工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案,但它提供了一个非常简单的解决方案。从RC.3开始,首选的解决方案是使用[routerLinkActive],如下所示。

在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时,0发布),你如何确定当前活动的路由是什么?

我正在开发一个使用Bootstrap 4的应用程序,我需要一种方法来标记导航链接/按钮为活动时,他们的相关组件显示在<router-output>标签。

我意识到,当单击其中一个按钮时,我可以自己维护状态,但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。

任何建议或链接将不胜感激。谢谢。


当前回答

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

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

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

其他回答

要标记活动路由,可以使用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中的默认值

在简单的情况下,当有一个链接并且你想应用一些类时,使用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版本对这个问题的答案:

RC4和RC3:

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

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

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

更多关于routerLinkActive指令的信息。

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

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

e.g

<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

你可以通过将Location对象注入控制器并检查path()来检查当前路由,如下所示:

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

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

你必须确保首先导入它:

import {Location} from "angular2/router";

然后,您可以使用正则表达式与返回的路径进行匹配,以查看哪个路由是活动的。注意,Location类返回一个规范化的路径,而不管您使用的是哪个LocationStrategy。所以即使你在使用hashlocationstrategy,返回的路径仍然是/foo/bar的形式,而不是#/foo/bar