zoukankan      html  css  js  c++  java
  • 6-2 创建底部 TabBar(2)

    输出型的属性和输入型的输入 对应上,这里先为空

    这个输入型的属性从哪里来? 它要从路由来

    参数hot就应该选中首页

    如果是recommend就应该选择推荐

    路由是一个流的参数

    事件的处理

    参数类型是tabItem


    声明数据流,它是一个Observable的number类型的

    现在我们这里直接是路由,而不是路由参数的形式。那么这行情况下我们怎么去处理呢?

    路由事件

    新的概念,路由事件。跟卤下把enableTracing设置为true

    刷新页面,这些就都是路由事件

    路由事件里面都有路由的id和url



    我们要看下url是什么,从url中解析它。那么url这些东西我们怎么去监测呢?
    注入router,然后继承onInit

    路由的events是一个Observable类型的

    我们把NavigationEnd事件过滤出来。

    然后对NavigationEnd做处理。


    把url用"/"去拆分,这样就得到了一个数组。

    斜线拆分,数组元素大于1

    大于1取第一个元素,否则就默认为home。这个时候我们得到的是一个字符串。

    根据字符串,把索引找到。通过和link这些值比较。











    最后默认值就是0

    小技巧。就是首页放最后。前面如果都不匹配的话,就默认为首页。

    在做一次map使用下面的方法。这样最终我们就得到了索引。

     

    点击跳转

    注意[]是一个数组的形式。


    点击报错。因为我们的路由还没有添加进去。

    recommend其实是传进去了

    总结

    路由事件是可以通过router.events事件去监听的。

    监听的时候它是一个流

    我们根据他不同的事件类型,去做相应的处理。




     

    结束

  • 相关阅读:
    如何保证 Redis 缓存与数据库双写一致性?
    如何合理地估算线程池大小?
    不用装工具,一条 Linux 命令就能实现文件上传下载!
    看了 Google 大神 Jeff Dean 的传说,我拜服了~
    div设置水平垂直居中
    "起用"与"启用"
    徇私舞弊
    精选排比金句20例
    一笔画图推
    一笔画
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/13592155.html
Copyright © 2011-2022 走看看