您的位置: 首页  >  IT文章  >  5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

分类: IT文章 • 2023-10-31 19:30:20

实现拼单里面的倒计时。小时、分钟、秒的格式。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
把组件放在shared下
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
component中继续导出
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
sharedModule中导入并导出
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
再导出
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
在parent中引用一下
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

使用rx的流。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
组件需要的属性
拿一个到期时间减去起始时间，时间差，再去减去流逝的时间
开始时间和到期时间。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

得到时间差。返回以秒为单位的数字
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

getTime是以毫秒
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
这样得到的是一个毫秒的差值
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

这总写法是es6 函数式的写法
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
rx中有个专有的操作符 是interval。它就是也给计时器。它是以毫秒为单位的。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
它是一个number类型的，我们先转换成字符型的 出来看一下
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
从9开始累加
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

插值的秒数，减去流逝的时间
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
需要做一下过滤。差值要大于等于0。
tkenWhile当表达式为真的时候，去订阅这个流。如果这个条件表达式为假了，就结束这个流。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
获取到日、小时、分钟、秒。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
return这个对象
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
es6简便的写法，放在括号内
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
再来转换，把对象转换成字符。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
简写形式。对象展开操作符。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

看效果
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
调用组件的时候，没有给属性赋值
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
一直在倒计时
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
复杂的Observable 我们一般会写一个函数，让程序逻辑更清楚。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
把前面this去掉
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

打印流里面的数据

有的时候需要看一下当前的值是什么值，打印
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
出来的是秒数。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

如果放在下面
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
上一步的map已经转换成了一个对象。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

map可以使用多次去改变流的形态。

总结

定时的事件，每隔一段时间会自动+1
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
takeWhilte当表达式为真就订阅，假的就结束订阅。filter只是过滤并不会结束订阅。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
流中间的操作用tab
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束

任意操作符都可以在这里面出现多次。
5-8 使用 rxjs 打造倒计时组件(1) 使用rxjs 打印流里面的数据 总结 结束
 

结束

 

相关推荐