响应式编程数据管道&组件间通讯的demo练习

第五章知识点记录：

(1)rxjs包的引入：是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。
(2)debouncetime(500):流更新结束后 500ms 才会通知观察者
(3)ng g pipe stock/stockFilter:创建管道文件，（在项目demo中的文件路径）

练习部分

一、实现表单页面搜索
1.在module页添加ReactiveFormsModule，[formControl]="nameFilter"绑定后台属性类型是formcontrol的namefilter，后台用valueChanges事件接到搜索框参数，然后创建过滤器文件。

图片.png

图片.png

图片.png

图片.png

第六章知识点：

1.输入属性：

装饰器：@Input()来声明属性；
创建一个stock-search组件作为子组件，模版上的input块和父组件做了一个双向绑定[(ngModel)]="search"，然后父组件和子组件做了一个双向绑定；还有父子组件的绑定数据传递是单向的，父可以给子，子给不了父

图片.png

图片.png

图片.png

图片.png

2.输出属性

用export class定义的封装查询出的信息，@Output()的使用来标记searchResult是一个输出属性 ，this.searchResult.emit(stockInfo)发射信息；组件会把数据发射到父组件上，父组件捕获后会把价格输出到父组件模版

子组件：

图片.png

图片.png

总结：这周做一些例子的练习，这段课程还是比价容易懂的，这两周时间有点紧事情有多，自己没有合理划分利用，下周要跟着伙伴一起每天一小时计划了，下周一定要比之前几周多学点课程，工作学习生活更规律一点，加油。