hui8758-CSDN博客

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

在项目中仿照网易云音乐首页搜索框实现了一个输入框输入内容自动加载表格数据的功能，具体实现看代码。 1、html模板相关dom<input type="text" placeholder="请输入内容查询" [(ngmodel)]="searchModel" #searchInput> 2、compoent组件对应内容，在组件对应的afterViewInit对应的生命周期方法中创建input框对应的事件Observable对象，并完成订阅。核心...

2021-01-06 18:14:06 492

原创在Angular项目中使用Rxjs的方式实现自定义滚动条

此处实现滚动条的核心逻辑与传统dom绑定鼠标事件的方式基本类似，可以参考我前一篇文章对比学习。首先，定义滚动条组件ScrollBarComponent，核心代码如下： 1、先定义一些组件相关的属性，跟传统dom绑定鼠标事件一样，具体看代码注释：canMove = false; // 滚动条是否可以移动disLeft: number; // 鼠标按下时距离滚动条最左边的距离moveLeft: number; // 滚动条移动的时候距离页面左边的距离...

2020-12-18 23:23:05 416

原创 Angular项目中自定义滚动条的使用

在项目中使用到了自定义滚动条的功能，简单记录下心得，跟网易云音乐自定义播放器进度的拖动原理类似，只是自己在项目中并没有使用Rxjs的方式去实现。自定义滚动条的核心逻辑是用dom模拟滚动条的样式，用鼠标事件来使滚动条跟着鼠标移动而移动，过程中也涉及到滚动条距离页面边距的计算。首先，定义滚动条组件ScrollBarComponent，核心代码如下： 1、先定义一些组件相关的属性，具体看代码注释：canMove = false; //...

2020-12-15 18:59:25 2030

原创 Angular中使用Resolve守卫实现预先获取路由组件所需数据

Angular官网中描述的使用resolve守卫主要解决的问题如下：如果你在使用真实 api，很有可能数据返回有延迟，导致无法即时显示。在这种情况下，直到数据到达前，显示一个空的组件不是最好的用户体验，最好使用解析器预先从服务器上获取完数据，这样在路由激活的那一刻数据就准备好了，还要在路由到此组件之前处理好错误。总之，你希望的是只有当所有必要数据都已经拿到之后，才渲染这个路由组件。学习Angular项目实现的网易云首页如下：在首...

2020-11-25 20:51:25 941 1

原创 Angular中常用Ref总结

1、ApplicationRef两个主要个作用：（1）可以通过appRef.tick()来全局性调用变化检测； ApplicationRef.tick() - 检查所有组件树（2）可以将视图用attachView()包含到变化检测中用detachView()将视图移除变化检测；不用ViewContainerRef，动态插入一个组件到一个特定的DOM节点：exp...

2019-08-01 19:10:59 4329

原创 Angular项目中使用echarts中国地图

首先要在Angular项目中安装echarts的依赖：npm install echarts --savenpm install ngx-echarts --save第二、在创建包含地图的Angular组件的时候引入echarts插件和包含的地图插件，并完成配置和初始化。主要有两种方式：第一种方式，通过JSON方式引入，步骤如下：（1）引入http...

2019-07-16 12:36:37 3798

原创 JavaScript数组（包含基本数据类型）中校验是否有重复数据的方法

1.对数组进行排序，比较相邻元素是否相等。const arr = ['111','22','33','111','44'];const arr2 = arr.sort();console.log(arr2);for (let i = 0; i < arr2.length; i++) { if (arr2[i] === arr2[i+1]) { console.log('1....

2019-05-09 14:12:17 1059

hui8758的博客