Angular
文章平均质量分 71
Delicia_Lani
这个作者很懒,什么都没留下…
展开
-
关于Websocket的两次实践(Vue项目实现在线聊天&Angular项目首页实时推送图表数据)
摘要:该文章记录了我使用websocket的两次实践经历,在第一次实践过程中,踩了很多坑。第二次实践,可谓得心应手,但是很多理论性还很欠缺。通过该文章,从理论到实践,一举全部拿下。一、Websocket理论(1)Websocket是什么?Websocket是一种网络通信协议,是一种在单个TCP连接上的全双工通信协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可原创 2021-07-16 09:14:43 · 763 阅读 · 0 评论 -
npm启动项目的时候报错ERROR in node_modules/htmlparser2/lib/index.d.ts(36,10): error TS1005: ‘from‘ expected.
在项目开发过程中,因为升级包,遇到下述问题:经过排查,主要原因是该插件与tyscript的版本不兼容,不支持上述文件下的语句。htmlparser2被升级到了6.0.1,这时所要求的ts版本是4点多,但是本地是3点多,导致不兼容。因此将该插件的版本进行降级,降级为3.9.1版本。...原创 2021-03-17 17:10:08 · 4098 阅读 · 0 评论 -
使用jsplumb绘图,实现连线
近期有个需求,实现节点之间的连线,选用的jsplumb来绘制。我自己在实现过程中,遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题,查了好多资料后,得以解决,有问题的小伙伴可以一起交流。jsplumb涉及的几个重要网址,可以作为研发过程中的依据:jsplumb官网:https://jsplumbtoolkit.comjsplumb中文(这个中文网站列出的API还是比较完善的):https://github.com/wangduanduan/jsplumb-chinese..原创 2021-03-10 16:51:01 · 5025 阅读 · 2 评论 -
Angular生命周期
什么是生命周期生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。 每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnInit.生命周期钩子分类 指令与组件共有的钩子 ngOnChanges ngOnInit ngDoCheck ngOnDestroy 组件特有的钩转载 2021-01-26 16:37:17 · 162 阅读 · 0 评论 -
Angular项目中实现图表,Echarts中自定义legend/tooltip/series-label
近期实现图表,很多字段需要自定义,显示请求回来的数据,下述文章给了我很大启示,介绍也比较全面:https://www.jianshu.com/p/4f459d16e8b4下面是我自己的代码,会发现主要是通过formatter函数来实现,关于formatter函数的介绍我还没有找到,等找到后再来分享:效果图如下:首先是中间蓝色框里的内容自定义,主要自定义series-label,这里自定义的数值30,是从服务端请求回来的一个总值,最初实现的时候,总是拿不到该值,通过formatter函数传原创 2020-05-29 18:05:16 · 709 阅读 · 0 评论 -
HTML attribute 与 DOM property 的对比
要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute 和 DOM property 之间的区别。attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。 少量 HTML attribute 和 property 之间有着 1:1 的映射,如id。 有些 HTML attribute 没有对应的 property,如colspan。 有些 DOM property 没有对应的转载 2020-05-24 20:22:03 · 212 阅读 · 0 评论 -
Angular使用Echarts动态数据不刷新
在Angular项目中使用Echarts来实现图表的过程中,从服务端请求回来数据,赋值之后,页面图表却不刷新,数据没问题,原因是原创 2020-05-22 16:33:05 · 1315 阅读 · 0 评论 -
angular发送post请求,下载文件
downloadFile(data, type) { this.downloadInfo.tid = data.id; if (data.savedReports.length !== 0) { data.savedReports.map(item => { this.downloadInfo.rid = item.id; }); ...原创 2020-03-18 10:27:42 · 904 阅读 · 0 评论 -
angular使用highlight高亮显示代码
具体使用过程参考官方文档:https://github.com/mattlewis92/angular-highlight-js使用过程中遇到的问题及解决方式1.安装angular-highlight-js之后,引入了highlight.js,报错,需要再安装highlight.js;2.在最初实践的时候,我在app.module.ts里面引入了相关依赖,当我需要将app.module...原创 2020-03-05 11:26:42 · 1893 阅读 · 0 评论 -
手写方法装饰器(MethodDecorator)
手写一个方法装饰器:export class AppComponent implements OnInit { ngOnInit() { new Person().pay(100); }}function methodName(target: any, key: string, descriptor: PropertyDescriptor) { const origi...原创 2020-03-06 19:43:54 · 523 阅读 · 0 评论 -
Angular实现路由跳转并传参
<a[routerLink]="['/tabChange']"[queryParams]="{code:buttonCode}">点击获取代码</a>在跳转后页面的代码中:import{ActivatedRoute}from'@angular/router';constructor(publicroute:ActivatedRoute){...原创 2020-01-16 09:48:43 · 424 阅读 · 0 评论 -
Angular项目中遇到的小问题集锦
1.添加form表单的时候,报错Can't bind to 'formGroup' since it isn't a known property of 'form'.解决方式连接:https://blog.csdn.net/cnwyt/article/details/848589452.angular-cli修改端口号,ng serve --host localhost --port ...原创 2020-01-14 11:54:11 · 688 阅读 · 0 评论 -
Angular项目中添加全局样式ng-zorro
自己在创建angular项目的时候,使用ng-zorro UI组件库,遇到安装之后,不生效的问题,是没有正确引入,其实官方文档也提到了。官网地址:https://ng.ant.design/docs/getting-started/zh1. 安装脚手架工具#使用@angular/cli前,务必确认Node.js已经升级到 v12.1 或以上,强烈建议升级至最新版本的@ang...原创 2020-01-05 20:36:50 · 3490 阅读 · 0 评论 -
Angular8封装基础url(适用于其他框架项目)
创建全局变量的ts文件,我在app目录下创建了global.ts文件,代码如下:// 无内网的环境export const basePath = 'https://www.easy-mock.com/mock/**********';在使用的文件中引入,并拿到全局定义的全局变量,代码如下:import * as globals from '../global';baseU...原创 2020-01-05 10:43:40 · 522 阅读 · 0 评论 -
Angular--Pipe管道理解及用法及自定义管道
1.什么是Pipe?就是管道,简单来说,管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)2.pipe用法{{ 输入数据 | 管道 : 管道参数}} (其中‘|’是管道操作符)3.Angular自带的pipe函数管道 功能 DatePipe 日期管道,格式化日期 JsonPipe 将输入数据对象经过JSO...原创 2019-12-31 10:03:59 · 1702 阅读 · 2 评论 -
Angular8--表单
官网地址:https://angular.cn/guide/forms-overview目录一、表单简介建立表单模型在响应式表单中建立在模板驱动表单中建立表单中的数据流响应式表单中的数据流模板驱动表单中的数据流表单验证实践一、表单简介1.Angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。两者都从视图中捕获用户输入事件...原创 2019-12-30 14:22:10 · 693 阅读 · 0 评论 -
RxJs快速入门(转载)
异步与“回调地狱”我们都知道 JavaScript 是个多范式语言,它既支持过程式编程,又支持函数式编程,两者分别适用于不同的场合。在同步环境下,两者各有优缺点,甚至有时候过程式会更简明一些,但在异步环境下(最典型的场景是一个 Ajax 请求完成后紧接着执行另一个 Ajax 请求),由于无法控制执行和完成的顺序,所以就无法使用传统的过程式写法,函数式就会展现出其优势。问题在于,传统的函数式...转载 2019-12-25 10:14:48 · 181 阅读 · 0 评论 -
Angular--Zorro中InputNumber数字输入框禁止输入非法字符(英文,标点等)
组件来源地址:https://ng.ant.design/components/input-number/zh我在项目中遇到的问题:使用nz-input-number组件,若用户输入非法字符,input框立马变为红色,表示警告。我第一反应就是一旦监听到用户输入了非法字符(除数字之外的),立马给予警告,同时input框就是这样实现的校验,但是在实际操作的过程中就会发现,我们无法实时监听用户的输入...原创 2019-12-24 13:10:43 · 4073 阅读 · 0 评论 -
Angular8--父子组件之间的传值
目录一、通过输入型绑定把数据从父组件传到子组件。二、父组件监听子组件的事件三、通过 setter 截听输入属性值的变化四、通过ngOnChanges()来截听输入属性值的变化五、父组件调用@ViewChild()https://angular.cn/guide/component-interaction官方文档https://blog.csdn.net/u0129678...原创 2019-12-20 14:57:00 · 2159 阅读 · 0 评论 -
小白的晋级之路--Angular
目录一、@ViewChild二、获取路由参数三、loadChildren四、Angular请求另一服务的API(请求代理)五、angular路由六、Angular之constructor和ngOnInit差异及适用场景七、表单中的数据流1、响应式表单中的数据流2、模板驱动表单中的数据流现在接触的技术栈是Angular,从零开始,点滴积累,努力提升。一、@...原创 2019-12-18 15:10:52 · 221 阅读 · 0 评论