twitter-bootstrap – 如何在Angular 2中设置Bootstrap navbar“

发布时间：2020-12-18 00:14:48 所属栏目：安全来源：网络整理

导读：如何在Angular 2中设置Bootstrap navbar“active”类？我只发现了 Angular 1 way. 当我转到About页面时,将class =“active”添加到About,并在Home上删除class =“active”. ul class="nav navbar-nav" li class="active"a [routerLink]="['Home']"Home/a/li

如何在Angular 2中设置Bootstrap navbar“active”类？我只发现了 Angular 1 way.

当我转到About页面时,将class =“active”添加到About,并在Home上删除class =“active”.

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['Home']">Home</a></li>
    <li><a [routerLink]="['About']">About</a></li></li>
</ul>

谢谢

解决方法

如果您使用新的3.0.0.组件路由器( https://github.com/angular/vladivostok)您可以使用routerLinkActive指令.无需进一步的JavaScript.

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
  <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>

我使用了“@ angular / router”：“^ 3.0.0-alpha.7”

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!