初识顶部TabBar

修改html文件，进行遍历取值展示为tab

<ul>
  <li *ngFor="let item of tabs" >
    <a  href="#">{{ item }}</a>
  </li>
</ul>

导出的类里面声明数组，供上面遍历

export class AppComponent {
  title = 'pinduoduo';
  tabs = ['热门','男装','手机']
}

修改默认样式

ul{
    padding: 0;
    margin: 0;
}
ul li{
    /* 去掉ul与li前面的点 */
    display: inline-block;
    margin: 0 5px;
}
a{
    /* 去掉a标签的下划线 */
    text-decoration: none;
}

修改全局样式

html,body,app-root{
    padding: 0;
    margin: 0;
}

效果如下图所示：

方的是事件绑定[]，括号是数据绑定()

 

给tabBar添加点击样式。

.active{
    color: red;
}

<ul>
  <li *ngFor="let item of tabs;let i = index;" >
    <a  
     href="#" 
     [class.active]="selectIndex===i"
     (click)="selectIndex=i"
     >{{ item.title }}</a>
  </li>
</ul>

三步

1、给ngFor添加let i=index，索引属性赋值给变量i。

2、给a标签添加class属性，并取值布尔

3、a标签添加点击事件，并赋值selectIndex为当前索引值。

这样一来，当点击a标签后，该元素的索引就被赋值给selectIndex，然后上面的动态class追加就是true，然后就添加样式。

TypeScript中的Interface

flex布局

ng serve --host 0.0.0.0   // 真机调试

手机浏览器打开：http://<电脑IP>:4200

添加类，并补全Menu属性

interface TopMenu{
  title:string;
  link?:string;
}

tabs :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:''
    }
  ]