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事件去监听的。

监听的时候它是一个流

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




 

结束