实战，现在还差下面的列表和 底部的bar
6-1 创建底部 TabBar（1）_angular8
现在只有热门，里面点击男装是没有东西的
6-1 创建底部 TabBar（1）_angular8_02

首先实现底部的tabBar

6-1 创建底部 TabBar（1）_angular8_03
和上面比较相似，只不过不可以滚动，没有小红条。这样我们就可以重构我们的组件。
6-1 创建底部 TabBar（1）_干货_04
在src/assets/tabs准备好了10张图片。
6-1 创建底部 TabBar（1）_数据_05
浏览器汇总实际上只有5个tab。但是它有选中的状态的效果。
6-1 创建底部 TabBar（1）_干货_06
在shared下创建footer
6-1 创建底部 TabBar（1）_点击事件_07

导出这个组件
6-1 创建底部 TabBar（1）_数据_08
components下的index.ts进一步导出
6-1 创建底部 TabBar（1）_干货_09
模块中声明
6-1 创建底部 TabBar（1）_angular8_10
再导出去
6-1 创建底部 TabBar（1）_数据_11

tabbar应该放在根组件当中。
6-1 创建底部 TabBar（1）_angular8_12

6-1 创建底部 TabBar（1）_数据_13
复制之前的代码
6-1 创建底部 TabBar（1）_干货_14
复制到我们的footer组件
6-1 创建底部 TabBar（1）_数据_15

6-1 创建底部 TabBar（1）_点击事件_16
不能滚动。所以让它显示的列和整体的列一样。这样他就不能滚动了。
6-1 创建底部 TabBar（1）_angular8_17
我们在组件是这样写的，只有列数大于显示的列才能滚动
6-1 创建底部 TabBar（1）_数据_180

构建数据。新建domain的文件夹。
6-1 创建底部 TabBar（1）_干货_19

6-1 创建底部 TabBar（1）_angular8_20

创建类的接口
6-1 创建底部 TabBar（1）_数据_21

6-1 创建底部 TabBar（1）_干货_22
title单词写错了 重新改一下
6-1 创建底部 TabBar（1）_点击事件_23

增加一个选中的属性。默认为0，选中第一个菜单。

6-1 创建底部 TabBar（1）_数据_24

6-1 创建底部 TabBar（1）_干货_25

6-1 创建底部 TabBar（1）_angular8_26

如果索引相同，那么就是选中的样式。否则就是默认的样式。
6-1 创建底部 TabBar（1）_点击事件_27
点击事件，传入当前的索引
6-1 创建底部 TabBar（1）_点击事件_28

6-1 创建底部 TabBar（1）_干货_29

6-1 创建底部 TabBar（1）_点击事件_30

点击页面进行跳转

我们要把选中的哪一个传出去，让父组件实现路由的跳转。
6-1 创建底部 TabBar（1）_angular8_31
EventEmitter要从angular core中选中。
6-1 创建底部 TabBar（1）_angular8_32

6-1 创建底部 TabBar（1）_干货_33
事件的处理当中，我们要把它发射出去。
6-1 创建底部 TabBar（1）_干货_34
把元素发射出去。把选中的tabIndex发射出去。
6-1 创建底部 TabBar（1）_干货_35
设置组件为笨组件。
6-1 创建底部 TabBar（1）_点击事件_36
6-1 创建底部 TabBar（1）_angular8_37
也是从angular/core中引用。
6-1 创建底部 TabBar（1）_点击事件_38

 

结束