Angular8 移动端顶部导航demo

子组件：html

<ul>
  <li *ngFor="let item of menus;let ind = index;">
  <a href="#"
  (click)="handelSelected(ind)"
  [ngStyle]="{'color' : currentTab===ind ? titleActiveColor : titleColor}"
  >
    {
  {item.title}}
  </a>
    <span class="indicator" *ngIf="currentTab === ind"></span>
  </li>
</ul>

css:

ul {
    margin: 0 ;
    padding: 0;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
ul li{
    white-space: nowrap;
    margin: 0 5px;
    padding: 0;
    display: flex;
    flex-direction: column;
}
a{
    text-decoration: none;
}
::-webkit-scrollbar{
    display: none;
}
.indicator{
    height: 2px;
    width: 2rem;
    margin-top: 2px;
    display: inline-block;
    background-color: brown