Angular2获得活跃路线

时间:2016-06-22 07:51:20

标签: angular routes

更新到Angular2 rc2和Angular2 rc3后,我有错误

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

我的功能

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

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

3 个答案:

答案 0 :(得分:5)

如果要根据 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-alpha.7):
only html layout needed

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

答案 1 :(得分:3)

您可能想要使用$('a').click(function() { var fullLink = $(this).attr('href'); var splittedLink = fullLink.split("?"); var href = splittedLink[0]; var qs = splittedLink[1]; // convert qs to body var splittedQs = qs.split('&'); var body = {}; for(var key in splittedQs) { var t = splittedQs[key].split('='); body[t[0]] = t[1]; } $.ajax({ type: 'post', data: body, url: href, success: function() { ... } }); return false; // prevent default });

ActivatedRoute

答案 2 :(得分:1)

使用路由器3.0.0-beta.2的Angular 2 rc4,指令评论指出:

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

然而,这也有效:

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

如果[routerLinkActiveOptions] =&#34; {exact:true}&#34;省略,当路由处于非活动状态时,不会删除该类。

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