首页 > 其他分享 >Angular debounceTime、Subject、Ng-Zorro中的tabs导航

Angular debounceTime、Subject、Ng-Zorro中的tabs导航

时间:2024-07-08 17:59:26浏览次数:18  
标签:index keyword tabs Zorro statusTabsInfo Ng list debounceTime Subject

在项目过程中,遇到了一些比较新的知识点,记录下来。

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

相关文章

  • 使用Python下载Bing每日一图并设置为壁纸
    简介Bing搜索引擎每天都会展示一张精美的图片,这些图片不仅美丽,而且常常包含有趣的信息。想象一下,每天打开电脑,都能看到这样的美景,是不是很棒呢?本文将介绍如何使用Python脚本自动化下载Bing每日一图,并将其设置为我们的桌面壁纸。环境准备在开始之前,请确保你的计算机上安装了Pyth......
  • Adobe acrobat打开pdf报错“Something went wrong Arunning instance of Acrobat has
    ArunninginstanceofAcrobathascausedanerrorInAcrobat,tryingtouseatoolorfeatureresultsinthefollowingerror:"ArunninginstanceofAcrobathascausedanerror." Reason:Theerroroccurswhenanalready......
  • C++ string基础用法
    基本操作构造与初始化默认构造:创建一个空字符串 std::strings;从C风格字符串构造:std::strings="Hello";从范围构造:std::strings(begin,end);从迭代器构造:std::strings(it_begin,it_end);从字符数组构造:std::strings(arr,arr+size);从重复字符构造:std::stri......
  • 在Spring Boot项目中集成分布式追踪系统
    在SpringBoot项目中集成分布式追踪系统大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在复杂的分布式系统中,定位和解决问题是一项挑战。分布式追踪系统通过跟踪请求的调用链,帮助开发者分析和优化系统性能,确保各个服务之间的协调与合作。本文将探讨如何......
  • 深入理解Spring Boot中的异常处理机制
    深入理解SpringBoot中的异常处理机制大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在任何应用程序开发中,异常处理都是至关重要的一部分。SpringBoot作为一个现代化的Java开发框架,提供了强大而灵活的异常处理机制,使开发者能够优雅地处理各种异常情况,保......
  • 解析Spring Cloud中的配置中心实现
    解析SpringCloud中的配置中心实现大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!1.SpringCloud配置中心简介SpringCloud为构建分布式系统中的微服务架构提供了丰富的解决方案,其中配置中心在微服务架构中扮演着关键角色。本文将深入探讨如何利用Spri......
  • SpringMVC-03-RestFul和Controller
    1、ControllerMVC架构中的控制层,在SpringMVC中,由Handler组成负责提供访问应用程序的行为:处理用户的请求并调用Model层将其转换为一个模型数据跳向View层在SpringMVC中,对于Controller的配置方式有很多种,通常可以通过接口定义或注解定义两种方法实现新建一个子项目,Sprin......
  • 在Spring Boot中集成单元测试框架
    在SpringBoot中集成单元测试框架大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!1.单元测试概述在软件开发中,单元测试是保证代码质量和功能正确性的重要手段。SpringBoot框架支持多种单元测试框架,如JUnit和Mockito,通过这些框架,开发者可以编写自动化的......
  • 解决Spring Boot中的国际化与本地化问题
    解决SpringBoot中的国际化与本地化问题大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!国际化与本地化概述在开发面向全球用户的应用程序时,国际化(Internationalization,简称i18n)和本地化(Localization,简称l10n)是非常重要的考虑因素。国际化指设计和实现软......
  • MS SQL Server Reporting Service升级
    案例参考:MSSSRS2014->MSSSRS2019因为MicrosoftSQLServer2019ReportingService是独立产品,不在集成于SQLServer服务安装,需要单独下载MSSQLServerReportingServiceinstallationpackage进行安装并migrationSSRSStepByStep:1.备份原SSRS安装目录\MSRS12.MSSQL......