接下来，来看如何的创建商品列表
6-5 创建垂直网格组件_for循环
一种是首页的这种。图片在左边，文字在右边。
6-5 创建垂直网格组件_html_02

另一种是推荐的这种、图在上方，文字在下方。都是可以垂直滚动的列表。
6-5 创建垂直网格组件_angular8_03
所以我们需要做一个垂直网格的组件。
这里是一列。
6-5 创建垂直网格组件_for循环_04
这里是两列。我们封装 一个组件，这样两个页面可以共用一个组件。
6-5 创建垂直网格组件_赋值_05
我们在shared下创建组件，因为两个模块我们都需要这个组件

6-5 创建垂直网格组件_for循环_06

导出这个组件
6-5 创建垂直网格组件_angular8_07
继续导出
6-5 创建垂直网格组件_angular8_08
模块中声明。
6-5 创建垂直网格组件_for循环_09
模块中导出
6-5 创建垂直网格组件_嵌套_10

使用这个组件
6-5 创建垂直网格组件_html_11
6-5 创建垂直网格组件_嵌套_12

编写组件

它肯定是一个容器组件
6-5 创建垂直网格组件_嵌套_13
里面使用ng-content
6-5 创建垂直网格组件_html_14
css。
溢出的时候会新增一行。比如我现在有两列，如果出现第三列，第三列就会放在第二行。
6-5 创建垂直网格组件_html_15
x轴不能滚动，y轴可以滚动
6-5 创建垂直网格组件_赋值_16

设置组件属性

希望外部可以控制宽度
6-5 创建垂直网格组件_for循环_17
中间的间隔
6-5 创建垂直网格组件_for循环_18

建立属性和之前一样，一个是列的模板，一个是行的模板
6-5 创建垂直网格组件_for循环_19
返回自己的高度
6-5 创建垂直网格组件_嵌套_20

6-5 创建垂直网格组件_html_21
最小的是自己的宽度。
6-5 创建垂直网格组件_html_22
最大是1fr
6-5 创建垂直网格组件_赋值_23

给属性赋值
6-5 创建垂直网格组件_赋值_24
6-5 创建垂直网格组件_嵌套_25
grid-template-columns对应的就是ts的属性 templateColumns
6-5 创建垂直网格组件_赋值_26
grid-gap属性。
6-5 创建垂直网格组件_赋值_27


调用组件的地方，如果这里是10rem宽度。
6-5 创建垂直网格组件_angular8_28
6-5 创建垂直网格组件_赋值_29
如果宽度是10rem，这样左右两边是，分列去排的。
6-5 创建垂直网格组件_angular8_30
随着item的增大
6-5 创建垂直网格组件_html_31
这样就是上下的结构。
6-5 创建垂直网格组件_嵌套_32

api

6-5 创建垂直网格组件_for循环_33
后面参数是差不多的
6-5 创建垂直网格组件_html_34
我们要根据上面不同的tab去取下面的列表数据。
6-5 创建垂直网格组件_嵌套_35

6-5 创建垂直网格组件_html_36
构建service内的方法
6-5 创建垂直网格组件_for循环_37

6-5 创建垂直网格组件_赋值_38

6-5 创建垂直网格组件_for循环_39
注意把后面的url改成products
6-5 创建垂直网格组件_for循环_40
在home-detail
6-5 创建垂直网格组件_html_41

6-5 创建垂直网格组件_for循环_42
html内线用ngFor循环试试
6-5 创建垂直网格组件_angular8_43

6-5 创建垂直网格组件_angular8_44
6-5 创建垂直网格组件_嵌套_45

6-5 创建垂直网格组件_html_46


6-5 创建垂直网格组件_angular8_47


6-5 创建垂直网格组件_for循环_48
出现问题，底部的tabBar没了
6-5 创建垂直网格组件_嵌套_49
往上滑动，顶部的tabBar也没了
6-5 创建垂直网格组件_赋值_50

我们希望中间是滚动的而不是所有的地方都可以滚动
外层嵌套一个div
6-5 创建垂直网格组件_嵌套_51
让他自动可以撑大
6-5 创建垂直网格组件_for循环_52
x轴可滚动，y轴不可滚动
6-5 创建垂直网格组件_嵌套_53
高度用计算的，100% 减去 3rem，因为我们顶部的tabBar是3rem
6-5 创建垂直网格组件_嵌套_54
这样再滚动，顶部和底部的tabBar都还在
6-5 创建垂直网格组件_赋值_55

结束