关于angular2路由激活状态时class设置

前端之家收集整理的这篇文章主要介绍了关于angular2路由激活状态时class设置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题是这样的:

上面的tabs各自对应一个路由,在后台这些tabs是由一个数组tabArray生成的,并不是写上去的,当用户点击左边的一个项目时,会push一个tab到tabArray中。

以上的内容都是比较容易实现的,难的是当点击x号的时候,要关闭当前路由,并激活一个tab的class(active) ,之前没有用到angular2的属性的时候,用的是js来实现的,可老是有bug出现。

之后用的是angular2中的

<ul id="section_nav_2">
    <li  routerLinkActive="active0"  *ngFor="let navbarTab of navbarTabs let i=index" (click)=tabsChange(i) > <a  routerLink="{{navbarTab.routerUrl}}">{{navbarTab.name}}</a> <i (click)=closeSection(i,navbarTab.routerUrl) *ngIf="navbarTab.showClose" class="fa fa-times-circle"></i> </li>
</ul>

routerLinkActive属性,便轻解决这个问题了

猜你在找的Angularjs相关文章