- 博客(61)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 使用行内式设置first-child，nth-child，last-child
使用行内式设置first-child，nth-child，last-child
2023-02-24 11:45:00
326
原创 Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘xxx‘
Can't bind to 'ngForOf' since it isn't a known property of
2023-01-03 15:54:02
632
原创 ant-desgin DatePicker两个及以上日期选择框联动
今天写一个日期选择框联动的需求，本来是想使用range的，但是range在具体使用上有诸多不便，于是便将两个日期选择框进行独立联动，在传值时将两个值再按照自己想要的格式进行传递这里我的写的是开始和结束年份保持在一年的例子(其他需求亦可以此为变种进行编写)这里的话需要用到一个非常好用的时间处理插件moment，安装的话直接使用npm i moment下载即可引用:import moment from 'moment'html <nz-year-picker nzFormat="yyy
2022-05-05 09:12:38
1151
原创 for,forEach,map,filter遍历效率之前端性能优化
在配置angular路由的时候可能会遇到这样的问题，我们在将子页面引入其父页面，通过父页面路由去访问它的时候，配置如下
2022-04-02 16:09:08
3555
2
原创 substr与substring的区别
相同点字符串方法String.substr 与 String.substring 都是从目标字符串上截取部分字符串的方法不同点写法：String.substr() 第一个参数是代表从哪个索引开始截取(包含此索引元素)，第二个参数是截取的长度，返回被截取的字符串，不改变原字符串长度const str = '0123456789'; // 直接量创建字符串console.log(str.substr(2)); // 23456789 只写入一个参数默认截取索引往后的所有字符console.lo
2022-03-04 16:59:40
358
原创 Object.prototype.isPrototypeOf与instanceof的区别
相同点Object.prototype.isPrototypeOf 与 instanceof 都是判断目标对象是否在另一个对象的原型链上的方法，都会在另一个对象的原型链上往上查找不同点写法：Object.prototype.isPrototypeOf()function foo(){} // 定义函数foo.prototype = { a: 1}; // 编辑函数的原型对象let con = new foo(); // 创建对象实例console.log(con.a);//打印的是1，
2022-03-02 10:30:39
287
原创 Object.hasOwnProperty和Object.propertyIsEnumerable的区别
相同点：hasOwnProperty，propertyIsEnumerable和isPrototypeOf都是用来判断目标属性是否为该对象的属性(不包括从原型链上继承的属性)目标对象：object 目标属性：targetAttribute不同点：1.hasOwnProperty遍历的是目标对象自身可遍历的属性用法：object.hasOwnProperty(targetAttribute) 判断属性是否存在于当前对象上，返回一个boolean类型值，存在为true，否则false2.prop
2022-03-01 17:01:54
296
原创 节流与防抖
节流与防抖，这两个词经常会出现在前端的应用中，很多时候我们只是该用的时候使用它，往往却不喜欢花时间理解亦或者是看到的逻辑较复杂，一时间无法记住重要的导致全部都被大脑清除掉了，所以我留下这个既不需要大费周章去理解，而简单看看就能很容易理解的记录什么是节流与防抖？节流：立即触发一次事件，在事件触发后的一段时间内再次触发事件不执行并且会将时间重置 let box = document.getElementById('box'); // 获取需要进行操作的dom元素 // 将d
2022-02-16 16:33:38
323
转载 js的执行顺序
JS的运行机制先来一个今日头条的面试题async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function() { console.l
2022-02-16 14:46:40
3137
原创 scrollTop设置不起效果的几种原因
今天在写需求的时候遇到一个要将表格的滚动条在进行路由跳转时固定的操作，然后没想到居然在scrollTop这个属性的设置上栽了坑，关于此问题的原因网络上的解释也五花八门，各不相同这里我们以下图demo为例，给大家解释一下设置scrollTop属性设置无效可能会遇到的几个原因1.父，子元素需设置高度，并且子元素高度必须大于父元素这一点应该很好理解，如果子元素高度始终小于父元素，那么无论怎么设置scrollTop的值都不可能大于02.父元素需设置overflow: scroll 或 overflow-y：
2022-01-17 17:34:24
11797
3
原创 ERROR NullInjectorError: NullInjectorError: No provider for TemplateRef
今天使用angular引用子模块时发生了这样一个错误本来以为是引入方式的问题，结果反复检查module中的写法也没发现问题，百思不得其解的状况下发现这种报错和引入方式报错还有些不一样，后来发现是自己ngswitch的写法有问题上图两种写法都不会报错，并且都有自动补全，但是只有第一种写法是正确的，第二种写法的指令并不存在与angular的内置指令中，于是便会抛出如上的错误，希望能够帮到遇到相同问题的小伙伴...
2022-01-14 11:56:49
712
原创 svn切换分支提示没有共同的祖先
今天在切换svn分支时提示了这个错误，然后仔细检查发现是自己当前选中的文件夹与想切换至的文件夹层级不同，比如当前即将切换至的文件夹的下一级就是存放依赖包的地方，而当前选中的文件夹的下一级却不是则会出现此错误，将切换与被切换两者文件夹相对应好即可...
2022-01-05 10:07:11
1724
原创 浅谈ng-content，ng-template与ng-container的区别
1.ng-contentng-content的作用是内容投影，主要用法是在父组件中将html投影到子组件中，具体写法如下父组件html<app-zippy-basic> <p>Is content projection cool?</p></app-zippy-basic>子组件tsimport { Component } from '@angular/core';@Component({ selector: 'app-zippy-b
2021-12-31 14:22:33
1328
原创 echarts双x轴伸缩配置
今天刚好要使用双轴形式的echarts做图表，但是由于数据过多需要同时使用echarts的伸缩配置datazoom，但是问题是配置写完后发现只有一条x轴和数据会试用到伸缩配置后来研究了一下发现datazoom相关配置需要与x轴进行相同配置这是双x的配置写法series: [ { name: '选择日期', type: 'line', xAxisIndex: 0, smooth: true, data: []
2021-12-28 15:54:52
1682
4
原创 echarts图表二次打开变形(缩小)的问题
今天在debug的时候发现一个令人匪夷所思的问题，即在当前路由下打开echart图表后其正常显示切换路由后切换回去检查了一遍排除了样式污染的可能，切换的路由也未载入echart(原因不详)解决方案：无意中发现窗口变动时图形会恢复正常所以我们可以说使用自定义触发窗口变更的方法（写在echart图形配置附近即可）window.dispatchEvent(new Event(‘resize’))...
2021-11-15 11:02:26
2459
2
原创 angular2+ 使用hash模式访问路由
今天在打包项目部署到线上的时候发现直接访问可以，但是刷新后页面会404，后来明白可以通过hash模式去配置路由使其每次刷新都停留在当前页面，具体配置如下在app.routing.module.ts中配置providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],解决方案参考至https://www.w3cways.com/2115.html...
2021-07-28 11:32:16
608
原创 前端实现点击旋转轮盘
我这边接到的需求是做一个轮盘，点击上半区时顺时针旋转，点击下半区时逆时针旋转，每次点击都将其旋转到相同位置，具体效果如下由于逻辑代码是自己一点一点研究出来的，为了避免资源的浪费，仅供真正有需要的人去获取...
2021-07-01 16:50:26
1128
原创 gif生成工具（免费）
今天突然发现csdn无法上传本地视频，但是可以上传gif文件，百度搜索的时候找的工具大都需要收费，于是自己便去寻找了一下向大家免费分享一款比较好用的git生成工具 LICEcap链接: https://pan.baidu.com/s/1n4RcN4wnXelPJfDmSSr8eg提取码: 5mer安装的话也很便捷，一路点击确定就行了使用的话点击此处然后选择文件保存位置停止的话点击旁边的stop键就可以了这是我录制的demo效果希望能够帮到有需要的人...
2021-07-01 15:46:17
756
原创 [object Object] && Unexpected token o in JSON at position 1 的 处理方案
今天在写项目的时候遇到一个问题，在路由跳转的过程中将一个对象传入跳转的参数中在接收的时候发现他已经变成[object Object]格式很明显是路由跳转的过程中自动将此对象参数转译成字符串了，后来我试着去使用JSON.parse将其转为对象，但是却报错由此可知其自动转译是使用toString方法进行转译的，其已经变为一个代码块，无法使用JSON.parse再转译回来所以遇到这种情况的时候我们需要根据实际情况进行相对应的处理如果是自己写的toString方法，可将其换成JSON.string
2021-06-09 10:35:39
1011
原创 angular2+ 路由传参监听
今天工作中遇到一个问题，大致为:从a路由跳转到b路由携带参数，我这里使用的是queryParams传参但是此参数为变量，而每次跳转时都需要监听此路由参数的改变触发回调做另一些操作，所以这里我们需要使用route中的订阅去监测路由的变化并在回调中做相应的操作...
2021-05-28 16:53:45
301
原创 Ant Design样式库样式修改&&模块样式私有化
我们在前端项目开发的过程中，我们经常需要使用到一些样式库，比如常用的Ant Design，Bootstrap等等，我们经常需要修改他们的内置样式，但是往往各种尝试在自己的css中添加样式却无法覆盖它们（后续有的话会继续更新）/deep/目前最有效的修改样式库的方法实际效果如下ex.模块样式私有化angular为例，每个模块的样式都是独立的，那么这里的话我们可以使用 :host 前置标签使样式私有化，如下希望能帮到有需要的人...
2021-05-18 17:06:08
446
原创 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
今天在code时遇到ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 类型报错，其实各站也有详细解释及解决方案，我在此写写自己简单的理解及解决方案用做笔记出现此报错的原因个人总结为一句话：在angular变更检测之后更改了某些值，angular为了防止模型数据与ui视图数据不一致产生的以本人此次报错为例我在此处添加了一个表单并且使用表单的验证是否通过控制“确定”按钮的禁用与
2020-12-10 16:48:48
9519
1
原创 给nz-select的nz-option设置样式
今天刚好接到一个需求要求鼠标移到nz-option上时显示option的名字的全称，原因是option的label太长导致无法显示完全(这里遇到相同问题的话也可以考虑将ng-zorro-antd组件版本升到10，版本10会自带title属性，但是版本升级可能会产生未知的问题所以我没考虑)这里的话还是需要用到option的自带api nzCustomContent我的实际代码如下，定义一个自定义模板，将想要进行写的样式放在自定义模板中，这样的话除了添加title属性以外还可以做更多的拓展，即使数据
2020-12-04 17:07:44
2658
2
原创 ‘app-xxx-xxx‘ is not a known element
angular项目中当需要将一个公共部分复用时如果对angular模块化不清晰可能会遇到这个问题以此为例：我想要在此页面引入reuse-customer公共部分，但是出现此类报错页面也会出现如下报错问题出现的原因是此模块被引入一个module中但是在你想要使用的页面module中却未引入它，所以框架编译时无法找到它便不会出现这样的问题了希望能帮到遇到相同问题的朋友...
2020-09-29 10:31:07
3287
原创 ng7 及以上 ngModel与 nz-form 表单冲突警告
It looks like you’re using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.今天在写ng表单编辑
2020-09-09 13:04:10
2225
原创 ngx-monaco-editor(源代码编辑器)无法显示的问题
我这边项目使用的是ng7,ngx-monaco-editor版本也是7.0.0，照着npm ngx-monaco-editor搞了一顿操作但都没有出来后来发现是因为忽略了在angular.json中进行配置的这一步PS:过程中还遇到了一个 Class MonacoEditorModule if not an Angular module 的 问题解决方法是使用forRoot引入希望能帮到遇到相同问题的朋友...
2020-08-12 20:35:45
1575
原创 angular2+ 基于Renderer2监听浏览器窗口变化
我这里暂时用过的就是使用Renderer2监听浏览器窗口变化，使用方法也很简单首先在控制器中引入Renderer2随后在视图初始化(ngAfterViewInit)后引入Renderer2监听事件，在浏览器窗口发生变化时，调用回调函数仅做笔记，感谢指正...
2020-06-28 10:24:22
907
原创 [tslint] keyCode is deprecated. (deprecation)
最近在写项目时发现之前一直能用的键盘事件keyCode属性被ts规范提示说要被废弃了于是便去寻找代替的方法，以图上esc事件为例(图上ESCAPE为一个变量，值为27)，发现现在应该改为(属性keyCode => key ， 对应值由number => string)，写法为下图所示下图是变量名对照表例如 MAC_ENTER 改为 MacEnter 即可(没有全部试过不过应该都能用，希望能帮到刚好需要的人)export declare const MAC_ENTER = 3;expo
2020-06-26 17:32:06
5415
2
原创 angular2+项目实用操作笔记(八) Resolve 路由守卫
当页面进行渲染的时候，可能会出现页面dom渲染太快而数据请求不及时造成的页面部分数据未请求到的情况，虽然这里可以用ngIf进行判断，但考虑页面渲染数据量大小的情况，还是推荐使用路由守卫首先在需要路由守卫的页面文件夹创建一个路由守卫文件，接着将需要进行请求的service引入其中，调用这些需要获取数据的方法最后在组件中中引入路由，路由中获取的data的数组便是整个路由守卫中获取的值组成的,将其分别赋值给页面变量即可仅做笔记，感谢指正...
2020-06-24 14:54:13
341
原创 angular2+项目实用操作笔记(七) 自定义管道
当项目中有多个页面需要对数据进行处理而官方不存在想要的管道时，可自定义管道进行数据处理(以过万数量简化为例)创建自定义管道文件 ng g p xxx(管道文件名)自定义方法后将其引入便可以在组件上使用了仅做笔记，感谢指正...
2020-06-21 11:25:15
299
原创 angular2+项目实用操作笔记(六) InjectionToken(令牌)优化接口地址
3.使用InjectionToken(令牌)定义固定端口地址将令牌放入serves.module中，之后再引入各个页面服务方法，使代码可读性以及可维护性更强，不会造成每次调用都重复写接口地址，在接口地址发生更改时也只需要更改这一个地方通过依赖注入，在使用请求的时候便可直接使用了ex:由于生产环境我们使用build --prod进行过打包，所以可以通过environment.production 来判断是否为生产环境而选择调用生产接口或测试接口仅作笔记，感谢指正...
2020-06-18 11:10:15
529
原创 angular2+项目实用操作笔记(五) 路由懒加载
关于路由懒加载的方法其实很简单首先在需要进行路由懒加载的页面routing-module中将其path置为空字符串(例下图home页面)接着在app-routing.module.ts中使用loadChidren导入home模块即可多个页面以此类推仅作笔记，感谢指正...
2020-06-15 11:21:39
285
关于多个标签点击单个高亮显示
2019-08-01
TA创建的收藏夹 TA关注的收藏夹
TA关注的人