顶部导航支持选中的状态

app.component.html

<ul>
  <li *ngFor="let menu of menus let i = index let f = first let even = even trackBy: menu ? menu.title : null">
    <a href="#" 
      [class.active]="i === selectedIndex"
      [class.first]="f"
      [class.even]="even"
      (click)="handleSelection(i)"
    >
      {{ menu.title }}
    </a>
  </li>
</ul>

app.component.css

ul {
    margin: 0;
    padding: 0;
    display: flex;
}
ul li {
    display: inline-block;
    margin: 0 5px;
    white-space: nowrap;
}
a {
    text-decoration: none;
}
::-webkit-scrollbar {
    display: none;
}
.active {
    color: red;
}
.first {
    color: green;
}
/* .even {
    color: pink;
} */

scrollable-tab.component.ts

import { Component, OnInit } from '@angular/core';
interface TopMenu {
  title: string;
  link: string;
}
@Component({
  selector: 'app-scrollable-tab',
  templateUrl: './scrollable-tab.component.html',
  styleUrls: ['./scrollable-tab.component.css']
})
export class ScrollableTabComponent implements OnInit {
  selectedIndex = -1;
  menus: TopMenu[] = [
    {
      title: '热门',
      link: ''
    },
    {
      title: '男装',
      link: ''
    },
    {
      title: '百货',
      link: ''
    },
    {
      title: '运动',
      link: ''
    },
    {
      title: '手机',
      link: ''
    },
    {
      title: '家纺',
      link: ''
    },
    {
      title: '食品',
      link: ''
    },
    {
      title: '电器',
      link: ''
    },
    {
      title: '鞋包',
      link: ''
    },
    {
      title: '汽车',
      link: ''
    },
    {
      title: '水果',
      link: ''
    },
    {
      title: '电脑',
      link: ''
    },
    {
      title: '内衣',
      link: ''
    },
    {
      title: '家装',
      link: ''
    },
    {
      title: '母婴',
      link: ''
    },
    {
      title: '美妆',
      link: ''
    },
    {
      title: '家具',
      link: ''
    }
  ];
  constructor() { }
  ngOnInit() {
  }
}