首页 > 其他 > 详细

Angular7里面实现 debounce search

时间:2019-06-13 13:42:32      阅读:316      评论:0      收藏:0      [点我收藏+]

项目需求:

  全局搜索 + 防抖 提高性能

技术:

  [(ngModel)]  [(ngModelChange)]  Rxjs( Subject)

代码展示: 

// html
<input type="text" placeholder="Search" [(ngModel)]="globalSearchContent" (ngModelChange)="globalSearch()">
// xx.component.ts
import { Observable, combineLatest, Subject } from ‘rxjs‘;
import { distinctUntilChanged, debounceTime } from ‘rxjs/operators‘;


private searchStream = new Subject<string>();

ngOnInit() {
// 订阅 this.initGlobalSearchSubscription(); } ngOnDestroy() {
// 取消订阅 this.searchStream.unsubscribe(); } private async initGlobalSearchSubscription() { this.projectId = await this.localStorageService.getItem(‘currentProject‘); this.searchStream.pipe( debounceTime(400), distinctUntilChanged()) .subscribe(async(searchContent) => { const searchResult = await this.projectService.globalSearch(this.projectId, searchContent).toPromise(); this.searchMenuList = searchResult.body; }); } private globalSearch() {
  // 消息发送 this.searchStream.next(this.globalSearchContent); }

具体实例

具有防抖和截流的第三方库:

lodash

underscore

rxjs

Angular7里面实现 debounce search

原文:https://www.cnblogs.com/juliazhang/p/11015780.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!