根据 Angular2 (RC3) 中的当前路由设置状态

Question

假设我有一个典型的设置，我可以选择一个选项的侧边菜单和右侧显示该选项内容的区域。

我想使用一系列routerLink 指令来构建侧边菜单，如下所示：

@Component({
selector: 'side-menu',
template: `
    <div>
        <ul>
            <li><a [routerLink]="['/option1']">Option 1</a></li>
            <li><a [routerLink]="['/option2']">Option 2</a></li>
            <li><a [routerLink]="['/option3']">Option 3</a></li>
        </ul>
    </div>
`
})

此外，我希望突出显示相应的<li>，例如使用class="active"。我怎么做？

当然，总是有click() 加上事件处理程序，但我认为这里只使用routerLink 比处理事件要干净得多。

我想提供一个 plnkr，但是从 @angular/router 导入后，当前的 Angular2 模板似乎已损坏，我猜这是因为 npm 中的 RC3 缺少路由器包。

Answer 1

我希望突出显示相应的<li>，例如使用class="active"。我该怎么做？

我们知道 angular2 的路由器不断变化，所以 ASAIK 使用 angular2 的新路由器，这很容易使用 routerLinkActive 中的 routerLink 指令。例如

<a [routerLinkActive]="['active']" [routerLink]="['/Demo']">
    Hello Link
</a>

这里正在工作 Working Example

还有很多类似的问题

• Angular 2: How to determine active route with parameters?
• In Angular 2 how do you determine the active route?
• In Angular 2 how do I assign a custom class to an active router link?

更新

有时会报错

无法读取未定义的属性“pathsWithParams” 所以你也必须用 routerLinkActive 来定义它

[routerLinkActiveOptions]="{exact:true}" 

看这里

• Angular2(RC-4) :Cannot read property 'pathsWithParams' of undefined