Question

我们如何使用css-class＆＃34; active＆＃34;来设置元素的样式？使用新的angular2.rc3＆amp; router3.0.0alpha6？

旧的方法似乎不再起作用了，关于新路由器的更精细细节的文档还很少......

Answer 1

感谢sanket将我指向另一个帖子！

在v3中，路由器确实有一种易于访问的方式来获取当前路由：

this.router.url

因此，使用css类设置活动路径组件样式的可能解决方案是：

<li [class.active]="isActiveRoute('/myroute')">
    <a [routerLink]="['/myroute']">
</li>

并在导航/菜单组件中：

isActiveRoute(route: string) : boolean
{
    if(this.router.url === route)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Answer 2

如果您想在实际的routerLink锚点上设置一些内容，那么现在V3中的一些功能可以让它更容易一些：

<li> <a [routerLink]="['/']" routerLinkActive="router-link-active">Home</a> </li>

如果该路线当前处于活动状态，那么等于routerLinkActive的任何内容将成为锚点的类别。不确定这是否正是您正在寻找的。

我通过在Github Repo上搜索Angular2个问题找到了这些信息：https://github.com/angular/angular/issues/9426。听起来像是在谈论有一些默认行为，其中类router-link-active被设置为当前活动的路由锚（就像在以前版本的路由器中那样）。

编辑：如果由于某种原因你想用h routerLink, etc.在html之外的元素添加一个类，这是我拼凑在一起的方式：

export class App implements OnInit, OnDestroy {


@HostBinding('class.home') isHome = false;
  constructor(router: Router, route: ActivatedRoute) {
    this.router = router;
  }

  ngOnInit() {
    this.sub = this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.isHome = e.url === '/';
      }
    });
  }
  ngOnDestroy() {
      this.sub.unsubscribe();
  }
}

参考：https://stackoverflow.com/a/37931429/6417489

Angular2 router3alpha - 如何获得activeRoute

2 个答案: