Angular7/Angular5实现tab切换选中_Angular Tab选项卡功能

Tab选项卡在前端工程中用的特别多，目前所用的ui组件库并没有给出Tab选项卡实现。所以自己就写一个Angular Tab切换功能。可以用在angular项目中，也可以用在ionic项目中。

当用户点击tab按钮的时候把点击按钮的id赋值给subHeaderSelected，当数据改变的时候angular会重新渲染模板。

这个时候回执行循环的时候会判断subHeaderSelected和当前列表中的id是否一样，一样的话当前点击的按钮就会加一个active的calss

1、Angular Tab选项卡功能第一步：定义选中的list

this.subHeaderList=[
        {
          id:1,
          title:"综合"     
     
        },
        {
          id:2,
          title:"销量"        
        },
        {
          id:3,
          title:"价格"       
        }
        
      ]

   }

2、Angular Tab选项卡功能第二步：定义模板数据

        

<div class="subheader"> 
<div *ngFor="let item of subHeaderList" (click)="subHeaderChange(item.id)" [ngClass]="{'active': subHeaderSelected==item.id}">           
  {{item.title}}
</div>        
</div>

3、Angular Tab选项卡功能第三步：执行方法

subHeaderChange(id){  

    this.subHeaderSelected=id;   //颜色选中
}

4、Angular Tab选项卡功能第四步：修改对应css

  .active{
        color:red;
    }

Angular5 Tab选项卡功能最终效果：