Question

我有几个li里面有一个按钮（我尝试用（nchor）代替按钮）并且每个按钮都有routerLinkActive指令，当我点击一个时，会添加相应的类（指令）但如果我在位置/地址栏中写下url，则不会将roterLinkActive的类添加到按钮

路线按预期工作。

这是模板

<ul>
    <li>
        <button routerLink="/link1"
                routerLinkActive="active"></button>
    </li>
    <li>
        <button routerLink="/link2"
                routerLinkActive="active"></button>
    </li>
    <li>
        <button routerLink="/link3"
                routerLinkActive="active"></button>
    </li>
</ul>

所以，如果我点击地址栏显示的第一个按钮 domain.com/link1 按钮具有类active

但是，如果我写domain.com/link1并按Enter键（或转到该地址），则不会将该类active添加到该按钮，但会按预期加载路径中指定的组件

我正在使用

"@angular/cli": "1.0.0-rc.2"

"@angular/router": "^3.4.0"

我不知道如何在Plunker中重现它，因为当我更改位置栏中的地址（路由器链接的最后部分）时，我似乎已经请求了另一个plunker

谢谢，抱歉我是angular2的新人

Answer 1

您应该使用routerLinkActiveOptions

<ul routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <li>
        <button routerLink="/link1"></button>
    </li>
    <li>
        <button routerLink="/link2"></button>
    </li>
    <li>
        <button routerLink="/link3></button>
    </li>
</ul>

Angular 2：当写入url（在位置栏中）时，相应的链接不会显示为活动状态

1 个答案: