在 Angular 2 中获取活动链接

Question

我正在尝试获取 Angular 2 中的活动链接，以便我可以在我的模板中更新我的 css。

这是我在谷歌的帮助下所做的：

export class AppComponent {
    router: Router;

    constructor(data: Router) {
        this.router = data;
    }

    isActive(tab): boolean {
        if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
            return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
        }
        return false;
    }
}

我的模板如下：

  <li class="some-class" [ngClass]="{active: isActive('some-route')}">

                <a [routerLink]="['SomeRoute']" class="menu-item" ><span>Link1</span></a>

            </li>

虽然这有效，但我注意到RouterLink 指令具有方法：isRouteActive。

这似乎是使用 this 操作链接类的明智方法。

但是我该如何使用它呢？

Answer 1

更新 RC.3：

在 RC.3 中routerLinkActive添加了一个新指令。

routerLinkActive="classA classB class" [routerLinkActiveOptions]="{exact: true}"

原来的：

Angular 路由器router-link-active在活动路由器链接上自动设置类。

如果你想要自定义类，你可以使用类似的东西

• 通过编写添加新类的自定义指令来更改“router-link-active”类的默认名称
• 在 Angular 2 中，如何将自定义类分配给活动的路由器链接？

也可以看看

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

• 在 Angular 中，您如何确定活动路线？

• https://github.com/angular/angular/issues/5334