根据 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

I'd like the corresponding <li> to be highlighted, using class="active", for example. How do I do that?

据我们所知，angular2 的路由器不断变化，因此 ASAIK 和 angular2 的新路由器非常容易使用 routerLinkActive 指令在你的 routerLink 中。例如

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

这里是 plunker Working Example

还有很多类似的问题

In Angular 2 how do I assign a custom class to an active router link?

更新

有时会抛出错误

Cannot read property 'pathsWithParams' of undefined so you have to define this as well with routerLinkActive

[routerLinkActiveOptions]="{exact:true}"

看这里

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

Set state based on current route in Angular2 (RC3)

angular2-template

angular2-routing

angular

更新