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 directive有方法：isRouteActive。

这似乎是一种使用此操作链接类的合理方法。

但我该如何使用它？

Answer 1

更新RC.3

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

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

真}“

<强>原始

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

如果您想要自定义类，可以使用类似

的内容

Changing the default name of "router-link-active" class by writing a custom directive that adds new class
In Angular 2 how do I assign a custom class to an active router link?

另见

获取Angular 2中的活动链接

1 个答案: