关于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 条评论
登录 后参与评论

相关文章

来自专栏别先生

Hadoop数据分析平台项目实战(基于CDH版本集群部署与安装)

1、Hadoop的主要应用场景:   a、数据分析平台。   b、推荐系统。   c、业务系统的底层存储系统。   d、业务监控系统。 2、开发环境:Linux...

4984
来自专栏闵开慧

ubuntu中配置hadoop

单机模式部署 一、Jdk安装 命令:sudo apt-get install openjdk-6-jdk 目录:/usr/l...

3199
来自专栏鸿的学习笔记

日志采集技术笔记

使用Linux的rename机制保证文件写入要么成功,要么失败,绝对不能出现写了一半的情况。

2325
来自专栏小樱的经验随笔

一个很easy的脚本--php获取服务器端的相关信息

存档: 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="...

3858
来自专栏杂烩

Redis linux下安装配置 原

make命令执行完成后,会在当前目录下生成本个可执行文件,分别是redis-server、redis-cli、redis-benchmark、redis-sta...

672
来自专栏一枝花算不算浪漫

[Linux]Linux下redis的安装及配置.

2978
来自专栏机器学习算法工程师

Windows下如何安装xgboost

最近有童鞋在后台询问windows下如何安装xgboost的问题,然后燕哥在团队中一问,哎!还真的有小伙伴会。然后一篇xgboost安装教程就热乎乎地出炉喽~ ...

2765
来自专栏葡萄城控件技术团队

如何在ASP.NET中生成HTML5离线Web应用

传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了 解决这一问题,HTML5中引入了Web的离线工作的功能。离线功能使得Web应...

2106
来自专栏转载gongluck的CSDN博客

搭建 FTP 文件服务

安装并启动 FTP 服务 任务时间:5min ~ 10min 安装 VSFTPD 使用 apt-get 安装 vsftpd: sudo apt-get in...

8107
来自专栏张戈的专栏

Linux服务器的进程查看命令详解

Linux 服务器正常启动后,提供服务时会调用程序,占用进程。这时候我们如何查看系统中有哪些进程在被调用呢?我们可以通过以下命令来查看。 一、ps 命令 ps ...

2.6K9

扫码关注云+社区