关于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属性,便轻解决这个问题了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏androidBlog

Git 配置别名 —— 让命令变得更简单

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

601
来自专栏程序员叨叨叨

【PHP】使用Propel踩过的坑

今天开始尝试使用Propel框架执行PHP对数据库的操作,对于学习中遇到的难题,笔者决定将其记录下来,以方便后来人借鉴(—_—|||感觉自大了)。好了,废话不多...

531
来自专栏LanceToBigData

linux(三)之linux常用命令二

今天就是星期五了,又可以休息两天了。有点小激动,开心。不过还是要加油,因为还有很多东西等着我去学习呢! 七、chmod  作用:修改文件的权限 7.1、命令...

1888
来自专栏流柯技术学院

windows / linux系统中,端口被占用解决方法

一、在windows操作系统中,查询端口占用和清除端口占用的程序 提升权限后用:netstat -b 或用 1、查询端口占用的进程ID          ...

1052
来自专栏令仔很忙

新手学Linux(六)----安装Nginx

nginx是C语言开发,建议在linux上运行,本教程使用Centos7.0作为安装环境。

962
来自专栏cnblogs

前端打包成桌面应用、以及chrome扩展

     前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况。上周...

20610
来自专栏bluesummer

用Windbg来分析.Net程序的dump

介绍 1. 什么是Windbg WinDbg是微软发布的一款相当优秀的源码级(source-level)调试工具,可以用于Kernel模式调试和用户模式调试,还...

3206
来自专栏web编程技术分享

【php增删改查实例】第二十一节 - 用户修改功能19.1 添加用户修改的按钮

1584
来自专栏从零学习云计算

openshift/origin学习记录(9)——S2I镜像定制(基于Git)

参考《开源容器云Openshift》一书,制作一个Tomcat的S2I镜像(从Git下载代码,Maven打包,部署到Tomcat上。) 从Svn下载代码的...

3090
来自专栏企鹅号快讯

Linux进程与定时任务

1、进程的概念 在linux中 (1)程序(软件):用代码决定程序的行为,存在存储介质中,如硬盘。 (2)进程(运行起来的程序):就是操作系统把存储介质上的可执...

1818

扫码关注云+社区