Angular项目中使用rxjs实现输入自动搜索的功能，类联想组件

        在项目中仿照网易云音乐首页搜索框实现了一个输入框输入内容自动加载表格数据的功能，具体实现看代码。

        1、html模板相关dom

<input type="text" placeholder="请输入内容查询" [(ngmodel)]="searchModel" #searchInput>

      2、compoent组件对应内容，在组件对应的afterViewInit对应的生命周期方法中创建input框对应的事件Observable对象，并完成订阅。核心是对debounceTime，distinctUtilChange，pluck操作符的学习和理解。

@ViewChild('searchInput') searchInput: ElementRef;

ngAfterviewInit() {
    fromEvent(this.searchInput.nativeElement, 'input').
    debounceTime(500). // 延时500毫秒发送源Observable发出的值，如果500毫秒内源Observable有新值发出，就会丢弃掉前一个延迟发送
    distinctUtilChanged(). // 发出源Observable前一个值不相同的值，这样就避免了重发请求
    pluck('target', 'value'). // 将源Observable中发出的值映射为的target对应的value属性，也就是在订阅的时候只需要value值
    subscribe((value: string) => {
        this.getTableData(value);
    });
}
    // 获取表格数据
getTableData(value) {
    this.dataService.getTableData({}).subscribe(res =>{
    }, err => {
    });
}

        3、在rxjs6之后，关于Observable的操作符有一个比较大的改变，需要在管道中去完成，具体如下：

fromEvent(this.searchInput.nativeElement, 'input').
    pipe(debounceTime(500),
        distinctUtilChanged(),
        pluck('target', 'value')). 
    subscribe((value: string) => {
        this.getTableData(value);
    });