Angular：如何使用参数确定活动路线？

Question

我已阅读this question about how to determine the active route，但我仍然不清楚如何使用参数确定活动路线？

现在我正在这样做：

<a [routerLink]="['/Profile/Feed', {username: username}]"
   [ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
   Feed for {{username}}
</a>

在我的组件内部：

getLinkStyle(path:string):boolean {
  console.log(this._location.path()); // logs: '/profile/john_doe/feed'
  return this._location.path() === path;
}

这会起作用，因为我将用户名作为字符串传递。有没有办法通过传递正确的参数来做到这一点？？

Answer 1

使用新的、即将推出的 Angular 2 路由器（在我写这篇文章时在 version 3.0-alpha.7），这非常简单。

您需要做的就是在链接中使用[routerLinkActive] 指令。

<a [routerLinkActive]="['active']" [routerLink]="['/contact',  contact.id ]">
    {{contact.name}}
</a>

这是 Angular 2 真正发布时您将使用的，不再是候选发布版本。我现在正在使用路由器的 alpha 版，没有任何问题。

Here's Plunk demonstrating it。当您单击它们时，您可以看到链接变为红色。这就是将active 类分配给它们的指令。当然，您可以使用您选择的任何类名。

Answer 2

只需检查自动定义的 router-link-active 类到 a 元素。

Answer 3

在 Angular 2 rc1 router.isRouteActive 中不再存在。 我在任何地方都找不到可行的解决方案，但我能够像这样解决它（自定义方法 isActiveRoute 可以解决问题）：

App.component.ts：

import { Component } from '@angular/core';
import { Routes, Route, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HomeComponent } from './home.component';
import { P1Component } from './p1.component';

@Component({
    selector: 'app',
    templateUrl: './app/app.template.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([
    { path: '/', component: HomeComponent },
    { path: '/p1', component: P1Component }
])

export class AppComponent implements OnInit {

    constructor(public router: Router){ }

    isActiveRoute(route: string) {
        return this.router.serializeUrl(this.router.urlTree) == this.router.serializeUrl((this.router.createUrlTree([route])));
    } 
}

App.template.html：

            <ul class="nav navbar-nav">
                <li [class.active]="isActiveRoute('/')">
                    <a class="nav-link" [routerLink]="['/']">Home</a>
                </li>
                <li [class.active]="isActiveRoute('/p1')">
                    <a class="nav-link" [routerLink]="['/p1']">Page 1</a>
                </li>

Answer 4

我一直在尝试设置 active 类，而不必确切知道当前位置是什么（使用路线名称）。这是迄今为止我得到的最佳解决方案。

这就是 RouteConfig 的样子 （我已经对其进行了一些调整以使其看起来像您想要的那样）：

@RouteConfig([
  { path: '/', component: HomePage, as: 'Home' },
  { path: '/signin', component: SignInPage, as: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, as: '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>

到目前为止，这是我解决此问题的首选解决方案，它也可能对您有所帮助。

Answer 5

您可以使用 Angular2 通用包中的新定位服务：https://angular.io/docs/js/latest/api/router/Location-class.html#!#path-anchor

import { Location } from '@angular/common';

...

export class YourClass {
    constructor(private _loc:Location) {}

    getCurrentPath() {
        return this._loc.path();
    }
}

注意：最好使用Router服务来触发路由变化。采用 仅当您需要与规范化 URL 交互或创建规范化 URL 时才定位 在路由之外。

请注意：文档说从router 导入，但我拥有的最新betta 版本在common 中有Location 服务。

Answer 6

试试这个：

<li   class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
            <div class="ann_header_menu_left ann_profile_avatar_small"></div>
            <span>Vishnu </span>
          </li>

Answer 7

对于 Angular 4+，确定模板中的活动路由相当容易，因为有一个用于此目的的内置指令，名称为 routerLinkActive，您可以使用以下方式：

      <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 title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

Answer 8

<a [routerLink]="['/Profile/Feed', {username: username}]"
routerLinkActive="active-item" [routerLinkActiveOptions]="{exact: false}">
   Feed for {{username}}
</a>

active-item 是您想要为活动菜单提供的 CSS 类。 routerLinkActive 用于为活动菜单提供 css，其中 routerLinkActiveOptions 将告诉您是否希望 url 完全匹配。这通常有助于您使用相同的 url 来创建和编辑（使用参数）

示例：

用于创建：

http://localhost/feed

编辑：

http://localhost/feed/1