切换tab按钮事件模块化

得到的需求是有个切换按钮，好几个模块都有这个切换功能，所以我们可以把它抽出来单独设置成一个模块。

首先是HTML文件：

<div class="switch-time">
  <p>
    {{title}}
    <img *ngIf="isPrompt" src="assets/images/ic_question_black.png"
         title="表示在查询时间范围内比赛和训练总时间较长的球队">
  </p>
  <div class="switch-time-content pull-right">
    <a class="pull-left" [ngClass]="timeType?'active':''" (click)="onItemSelectSeven()">近7日</a>
    <a class="pull-right" [ngClass]="!timeType?'active':''" (click)="onItemSelectThirty()">近30日</a>
  </div>
</div>

动态的向里面设置title和是否显示img图标。其中通过ngClass来动态的控制a标签的切换效果。

控制效果在component.ts中

import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";

@Component({
  selector: 'switch-time',
  templateUrl: './switch-time.html',
  styleUrls: ['./switch-time.less'],
})
export class SwitchTimeComponent implements OnInit {

  @Input() title: string;
  @Input() prompt: boolean;
  @Input() timeType: boolean;
  @Input() isPrompt: boolean; //是否显示提示语图片
  @Input() promptTitle: string; //显示提示语的信息
  @Output() onChangeItem = new EventEmitter<any>();

  constructor() {

  }

  ngOnInit(): void {
  }

  public onItemSelectSeven() {
    if (!this.timeType) {
      this.timeType = true;
      this.onChangeItem.emit(true);
    }
  }

  public onItemSelectThirty() {
    if (this.timeType) {
      this.timeType = false;
      this.onChangeItem.emit(false);
    }
  }


}

其他文件引用它：

<switch-time [title]="'跑动排行'" [timeType]="true" (onChangeItem)="selectItem($event)"></switch-time>

less文件如下：

.switch-time {
  height: 50px;
  border-bottom: 0.5px solid #8297A5;
  margin: 0 10px;

  p {
    font-size: 16px;
    color: #333333;
    line-height: 18px;
    display: inline-block;
    margin-top: 22px;
    margin-left: 20px;
  }

  img {
    width: 14px;
    height: 14px;
    margin-bottom: -1px;
    &:hover {
      cursor: pointer;
    }
  }

  .switch-time-content {
    width: 120px;
    height: 30px;
    border: 1px solid #103851;
    margin-top: 14px;
    margin-right: 20px;

    a {
      width: 59px;
      height: 28px;
      vertical-align: top;
      line-height: 28px;
      display: inline-block;
      text-align: center;
      font-size: 13px;
      color: #06263D;
      background-color: #ffffff;
      cursor: pointer;
      &.active {
        background-color: #103851;
        color: #ffffff;
        cursor: default;
      }

    }

  }

}

具体就是如此了不会很难  试试吧