Angular:如何使用参数确定活动路径？

我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？

现在我这样做:

   Feed for {{username}}

在我的组件内:

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

这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？

1> Michael Oryl..：

---

使用新的,即将推出的Angular 2路由器(在我写这篇文章时版本为3.0-alpha.7),它非常简单.

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

    {{contact.name}}

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

这是Plunk演示的.您可以看到链接在您点击它们时变为红色.这是将active类分配给他们的指令.当然,您可以使用您选择的任何类名.

2> iuristona..：

---

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

---

如果应用了`router-link-active`类，是否可以自动设置一个“ active”类？因为大多数CSS模板都需要其他类名，所以我不想修改模板。@AicoKleinOvink Afaik它已经存在于最新的alpha版本中。

3> Mcanic..：

---

在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:

            

                

                    Home
                
                

                    Page 1
                

4> Alex Santos..：

---

我一直试图设置活动类,而不必确切知道当前位置是什么(使用路由名称).这是迄今为止我遇到的最佳解决方案.

这就是RouteConfig的样子(我已经调整了一下看起来像你想要做的):

@RouteConfig([
  { path: '/', component: HomePage, as: 'Home' },
  { path: '/signin', component: SignInPage, as: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, as: 'ProfileFeed' },
])

而观是这样的:

   Home


   Sign In


    Feed

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

---

.这是迄今为止我遇到的最佳解决方案.

---

: