更新

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

还有很多similer问题

更新

有时会抛出错误

无法读取属性＆＃39; pathsWithParams＆＃39;未定义的所以你必须使用routerLinkActive
来定义它

[routerLinkActiveOptions]="{exact:true}"

见这里

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

根据Angular2（RC3）中的当前路径设置状态

1 个答案:

更新