Angular2获取活动路由

Question

更新到Angular2 rc2和Angular2 rc3后，出现错误

“类型‘路由器’上不存在属性'urlTree‘”

我的函数

isRouteActive(routePath) {
    return this.router.urlTree.contains(this.router.createUrlTree(routePath));
}

如何在angular2 rc3中获取活动链接？

Answer 1

如果你打算根据activeRoute来设计一些元素的样式，你可以使用元素的[routerLinkActive]="['your-class-name']"指令。

routerLinkActive directive source

更新

旧样式(不推荐使用路由器)：

html layout

<li [class.active]="isActive(['Dashboard'])">
    <a [routerLink]="['dashboard']"><span class="nav-label">Dashboard</span></a>
</li>

*.ts component

isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
}

新样式(路由器版本3.0.0-α7)：

only html layout needed

<li [routerLinkActive]="['active']">
    <a [routerLink]="['dashboard']"><span class="nav-label">Dashboard</span></a>
</li>

Answer 2

您可能想要使用ActivatedRoute

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'contacts-detail',
  ...
})
export class ContactsDetailComponent {

  constructor(private route: ActivatedRoute) {

  }
}

Answer 3

使用路由器3.0.0-beta.2的Angular 2 rc4。2指令注释说明：

<a routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/']">HOME</a>

然而，这也是可行的：

<a [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/']">HOME</a>

如果省略routerLinkActiveOptions="{exact: true}“，则当路由处于非活动状态时，类不会被删除。

请参阅：https://github.com/angular/angular/blob/master/modules/%40angular/router/src/directives/router_link_active.ts