在项目过程中,遇到了一些比较新的知识点,记录下来。
1.rxjs核心概念之Subject
subject是最简单的一种Subject类型,它既是可观察对象(Observable),也是观察者(Observer)。Subject会维护一个观察者列表,并将通知到任何订阅它的观察者。
/**
* 搜索订阅者
*/
private searchKey$ = new Subject<any>();
// 业务搜索
this.searchKey$.pipe(debounceTime(300)).subscribe(keyword => {
let index = this.statusTabsInfo.list.findIndex((v: any) => v.keyword === keyword);
if ((index = -1)) {
this.statusTabsInfo.list.push({
text: `搜索:${keyword}`,
tag: 'search',
keyword,
});
index = this.statusTabsInfo.list.length;
}
this.statusTabsInfo.selectedIndex = index;
});
search: () => {
if (this.actionSearchInfo.value) {
this.searchKey$.next(this.actionSearchInfo.value);
}
},
2.Ng-Zorro中的tabs导航
/**
* 状态栏切换
*/
statusTabsInfo = {
list: <any[]>[],
selectedIndex: 0,
loadStatusList: () => {
this.statusTabsInfo.list = this.service.getWfListInfo();
this.statusTabsInfo.list.push({
text: '业务检索',
value: 5,
});
},
selectChange: (event: any) => {
if (this.statusTabsInfo.list && this.statusTabsInfo.list[event.index].value !== 5) {
this.tableInfo.pageChange(true);
} else {
this.tableInfo.data = [];
}
},
};
当导航栏中的数据list是通过异步请求获取的数据时,会自动调用nzSelectedIndexChange回调函数,如果list的数据是直接赋值得到,则不会调用。
3.debounceTime减少搜索的频率
debounceTime的作用就是降低事件的触发频率,在一定时间范围内,不管触发多少次,只放第一个过去,剩下得都不会在生效。
this.searchKey$.pipe(debounceTime(300))
有问题,欢迎补充指正
标签:index,keyword,tabs,Zorro,statusTabsInfo,Ng,list,debounceTime,Subject From: https://blog.csdn.net/m0_51558568/article/details/140275224