让底部的tabBar可以真正的切换路由
在recommend下创建components,然后在components下创建index.ts
6-3 底部 TabBar 切换路由
创建组件。组件名都叫做容器名+container的命名方式。
6-3 底部 TabBar 切换路由
导出
6-3 底部 TabBar 切换路由
模块下声明组件
6-3 底部 TabBar 切换路由

路由设置

6-3 底部 TabBar 切换路由
每个模块再单独建index.ts
6-3 底部 TabBar 切换路由
根模块导入 Recommend模块。导入新的模块要把ng server 停掉的。
6-3 底部 TabBar 切换路由

创建components文件夹。
6-3 底部 TabBar 切换路由
创建组件 my-container
6-3 底部 TabBar 切换路由
组件内index.ts 导出这个组件
6-3 底部 TabBar 切换路由
components内导出
6-3 底部 TabBar 切换路由
模块也加上index.ts
6-3 底部 TabBar 切换路由
导出
6-3 底部 TabBar 切换路由
模块内声明组件
6-3 底部 TabBar 切换路由

路由配置

6-3 底部 TabBar 切换路由

根路由

6-3 底部 TabBar 切换路由
刷新也是选中的my
6-3 底部 TabBar 切换路由
 

其他模块

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

固定底部工具栏

6-3 底部 TabBar 切换路由
对于没一个模块当中,它的css都改造一下

6-3 底部 TabBar 切换路由

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

更改app根组件的样式

6-3 底部 TabBar 切换路由
固定下面了
6-3 底部 TabBar 切换路由

删掉一些不需要的东西

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

6-3 底部 TabBar 切换路由

删除
6-3 底部 TabBar 切换路由
路由都删掉
6-3 底部 TabBar 切换路由

删除后
6-3 底部 TabBar 切换路由

顶部导航选中

上面的导航刷新后,没有选中
6-3 底部 TabBar 切换路由
添加一个input属性。
6-3 底部 TabBar 切换路由
这里的判断换成下面
6-3 底部 TabBar 切换路由
原来的这里删掉
6-3 底部 TabBar 切换路由
这里改成index
6-3 底部 TabBar 切换路由

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

怎么得到这个路由

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

注入激活的路由
6-3 底部 TabBar 切换路由
第一个孩子,底下的都是它的参数
6-3 底部 TabBar 切换路由
home下面有很多的子路由,我们取的child的第一个。
6-3 底部 TabBar 切换路由
导入
6-3 底部 TabBar 切换路由

这里就不报错了
6-3 底部 TabBar 切换路由

二级菜单默认选中了。
6-3 底部 TabBar 切换路由

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

结束





 

相关文章:

  • 2021-04-10
  • 2021-08-17
  • 2022-12-23
  • 2022-12-23
  • 2021-08-20
  • 2021-06-27
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
  • 2021-11-30
  • 2021-09-11
  • 2022-03-04
  • 2022-12-23
相关资源
相似解决方案