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

最新推荐文章于 2021-06-23 11:22:41 发布

转载最新推荐文章于 2021-06-23 11:22:41 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kaykie/blog/893043

文章标签：

#javascript #ViewUI

本文介绍如何使用Angular2的特性实现动态生成并管理页面Tab的功能，包括为每个Tab设置路由以及通过点击关闭按钮来移除指定的Tab并更新路由。

为什么80%的码农都做不了架构师？>>>

问题是这样的：

上面的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属性，便轻解决这个问题了

转载于:https://my.oschina.net/kaykie/blog/893043