让底部的tabBar可以真正的切换路由
在recommend下创建components，然后在components下创建index.ts
6-3 底部 TabBar 切换路由_css
创建组件。组件名都叫做容器名+container的命名方式。
6-3 底部 TabBar 切换路由_二级菜单_02
导出
6-3 底部 TabBar 切换路由_css_03
模块下声明组件
6-3 底部 TabBar 切换路由_路由配置_04

路由设置

6-3 底部 TabBar 切换路由_刷新页面_05

6-3 底部 TabBar 切换路由_angular8_06
每个模块再单独建index.ts
6-3 底部 TabBar 切换路由_刷新页面_07

6-3 底部 TabBar 切换路由_刷新页面_08
根模块导入 Recommend模块。导入新的模块要把ng server 停掉的。
6-3 底部 TabBar 切换路由_路由配置_09


6-3 底部 TabBar 切换路由_css_10

my模块

创建components文件夹。
6-3 底部 TabBar 切换路由_angular8_11

6-3 底部 TabBar 切换路由_css_12
创建组件 my-container
6-3 底部 TabBar 切换路由_css_13
组件内index.ts 导出这个组件
6-3 底部 TabBar 切换路由_二级菜单_14
components内导出
6-3 底部 TabBar 切换路由_刷新页面_15
模块也加上index.ts
6-3 底部 TabBar 切换路由_css_16
导出
6-3 底部 TabBar 切换路由_路由配置_17
模块内声明组件
6-3 底部 TabBar 切换路由_路由配置_18

路由配置

6-3 底部 TabBar 切换路由_angular8_19

根路由

6-3 底部 TabBar 切换路由_路由配置_20
6-3 底部 TabBar 切换路由_二级菜单_21
刷新也是选中的my
6-3 底部 TabBar 切换路由_css_22
 

其他模块

这里模块在课程中不会去实现。留作作业。
6-3 底部 TabBar 切换路由_angular8_23

固定底部工具栏

6-3 底部 TabBar 切换路由_刷新页面_24
对于没一个模块当中，它的css都改造一下

6-3 底部 TabBar 切换路由_路由配置_25

然后复制上面的css给每一个container都加上
6-3 底部 TabBar 切换路由_二级菜单_26


6-3 底部 TabBar 切换路由_刷新页面_27

更改app根组件的样式

6-3 底部 TabBar 切换路由_刷新页面_28
固定下面了
6-3 底部 TabBar 切换路由_二级菜单_29

删掉一些不需要的东西

删掉一些不需要的东西，让我们的下一步工作更简单一点。

6-3 底部 TabBar 切换路由_刷新页面_30

删除
6-3 底部 TabBar 切换路由_二级菜单_31

6-3 底部 TabBar 切换路由_angular8_32

6-3 底部 TabBar 切换路由_angular8_33
6-3 底部 TabBar 切换路由_路由配置_34
路由都删掉
6-3 底部 TabBar 切换路由_刷新页面_35


6-3 底部 TabBar 切换路由_路由配置_36


6-3 底部 TabBar 切换路由_刷新页面_37

6-3 底部 TabBar 切换路由_二级菜单_38

6-3 底部 TabBar 切换路由_刷新页面_39

6-3 底部 TabBar 切换路由_二级菜单_40

删除后
6-3 底部 TabBar 切换路由_刷新页面_41

顶部导航选中

上面的导航刷新后，没有选中
6-3 底部 TabBar 切换路由_二级菜单_42
添加一个input属性。
6-3 底部 TabBar 切换路由_刷新页面_43
这里的判断换成下面
6-3 底部 TabBar 切换路由_刷新页面_44

6-3 底部 TabBar 切换路由_css_45
原来的这里删掉
6-3 底部 TabBar 切换路由_angular8_46

6-3 底部 TabBar 切换路由_路由配置_47
这里改成index
6-3 底部 TabBar 切换路由_二级菜单_48

使用组件的地方 加上input属性
6-3 底部 TabBar 切换路由_angular8_49
还是使用流的形式来做
6-3 底部 TabBar 切换路由_css_50

怎么得到这个路由

我们现在是父路由，如何得到自路由的参数。
6-3 底部 TabBar 切换路由_css_51

注入激活的路由
6-3 底部 TabBar 切换路由_css_52
第一个孩子，底下的都是它的参数
6-3 底部 TabBar 切换路由_刷新页面_53
home下面有很多的子路由，我们取的child的第一个。
6-3 底部 TabBar 切换路由_angular8_54


6-3 底部 TabBar 切换路由_二级菜单_55

6-3 底部 TabBar 切换路由_路由配置_56

6-3 底部 TabBar 切换路由_二级菜单_57


6-3 底部 TabBar 切换路由_css_58
导入
6-3 底部 TabBar 切换路由_angular8_59

这里就不报错了
6-3 底部 TabBar 切换路由_刷新页面_60

二级菜单默认选中了。
6-3 底部 TabBar 切换路由_刷新页面_61

切换并刷新页面
6-3 底部 TabBar 切换路由_路由配置_62
 

结束