moqiuqin的博客

对于目前的三大框架而言，都是不建议直接对dom进行操作的，但是实际业务有时候难免需要，因为需要操作dom的时候并不多，所以东西容易忘，还是记录一下为好，在angular中官方提供了操作dom的类，这一点是很不错的，当然也可以自己用原生的方法去操作，但是官网中明确是不建议这么操作的，那么可以理解为官方的类为我们处理了一些直接操作dom带来的可能性能方面上的问题吧主要的一步是在构造器里注入ElementRef和Renderer2这个两个类，在指令中或者管道中，注入ElementRef拿到就是指令或者管道的宿

cdk是angular官方维护的一个开发工具包，其实官网写的很明白了，只是overlay这块只有一个用指令写的demo，其他的一些用法只能看个人的理解能力去发挥他的强大功能了。了解cdk还是因为在使用ngzorro中发现这个浮层做的也太牛了，兴趣驱动下去了解才发现的。其实一般情况下用了ngzorro，基本不用考虑去封装什么通用组件了，ngzorro基本都涵盖了，但是要想提高还是需要了解的，比如当你维护公司的组件库的时候。当初就是因为没了解cdk才写了那么多冤枉代码，浮层指令，拖拽功能，如今看到官方其实都有

angular中使用openlayers本来是没什么难度的，但是如果要加载百度地图还是有些问题的，在openlayers3中坐标是从原点右上递增，而openlayers6中是右下递增，这就导致使用百度地图作为底图时出现图层错乱的问题，同时还有偏移问题，相关的问题和解答网上的资料真的少，对于不是gis专业出身的人来说真的能搞死人，此外还有openlayers那文档，不是英文的原因，是真的难以看懂。首先是安装，要注意的还是版本问题，openlayers6和之前版本的安装命令不一样。两种不同的安装命令意味着有

添加webpack不同分两种情况，分别是高于ng8和低于ng8低于ng8：npm i -D @angular-builders/custom-webpack@版本号npm i -D @angular-builders/dev-server@版本号build节点的builder改为@angular-builders/custom-webpack:browserbuild节点的opti...

在写demo的时候想让项目文件看的简洁一点，想取消生成测试文件，在angular.json中的schematics节点进行如下配置 "schematics": { "@schematics/angular:component": { "styleext": "scss", "spec": false }, "@schematics/angular:class": { "spec": false

创建好项目之后执行命令// --prefix: 是选择器的前缀，例如ng默认的app前缀，可以不要ng g library zh-rate --prefix zh执行以上命令之后自动生成文件夹：projects，文件夹下有一些配好的文件此时进入到projects文件夹下的lib目录中找到你的组件进行编写，和编写正常的ng代码一样，要注意的是，如果报了一些指令没法用的问题，比如ngSty...

angular中使用echarts的教程很多，但很多都是结合ngx-echarts，但个人在学习一个新的东西的时候不喜欢在此基础有加一个东西，所以这里不使用ngx-echarts1：下载安装echartsnpm install echarts --save2：下载安装echarts的ts支持，因为echarts是js写的，而angular是ts，安装这个是为了API提示npm ins...

首先这里说一下这个方式只适合小文件的上传，并且存在弊端，对于大文件参考我的另一篇博客ng2-file-upload+node.js+express实现文件上传并保存本地首先前台就是通过file类型的input选择文件<input type="file" (change)="selectFile($event)" id="inputBox">然后进行文件读取并上传 /** ...

Angular中如果使用自定义属性时使用的是H5添加的方式，那么有一个问题是，自定义属性的值是固定不变的，也就是不能绑定变量，比如下面的方式<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)" data-index="i" #dots&...

使用动态表单目的就是不用去手动编写太多的HTML代码，设置好之后就由数据的多少以及类型来动态生成表单，提高效率。在Angular的官网中介绍动态表单时，夹杂了一些业务方面的东西，增加了不熟悉的人学习的难度，这里直接就是为了演示怎么产生和使用动态表单。使用动态表单时，有可能需要input类型、textarea类型或者其他表单类型等，在拿到数据构建相关控件时，需要制定一些基本的东西，比如控件类型、值...

Angualr获取当前激活路由可以通过PlatformLocation和Router获取，还有一说Location也可以，看名字估计是没问题的。这里就写前面两个，PlatformLocation这个包来自@angular/common，Router来自@angular/routerconstructor( private route:Router, private planfor...

ng2-file-upload这个包挺好用的，但是好像没有人维护了，GitHub上的最新记录已经是两年之前了。常规操作：1、装包：npm i ng2-file-upload --save2、注册相应的模块：在angular的根组件中注册CommonModule和FileUploadModule，FileUploadModule这个模块没有智能提示就手动输入import { FileUploa...

开发中可能会遇到这种需要：根据后台传过来的数据填入表单中，供用户查看与编辑，如果传过来的数据长度、格式固定，那么很好做，但如果传过来的数据长度是变化的，那么使用普通方式进行创建控件就显得行不通了。要想实现这种需求，只能借助FormArray，根据数据量进行动态创建了。假如后台传过来的数据为： arrData=[ {name:"张三",sex:"男"}, {name:"李四",...

angualr阻止事件冒泡可以通过显示阻止和自定义指令阻止，但其实本质上都是一致的，都是通过调用stopPropagation实现。显示阻止就是每次都手动调用stopPropagation，Angular事件绑定会通过名叫 $event的事件对象传递关于此事件的信息，如果没有引用其他的东西，一般情况下$event就是DOM事件对象，<div class="one" (click)="on...

前言接触angular还有两个多月就要整整满一年了，从一个.net程序员变成了一个前端，在了解了前端的东西之后爱上了前端，怎么说呢，其实对于前端这种侧重数据展示的开发自己本身就喜欢，奈何没有引路人，各种原因之下最后进了.net的坑。好了，废话不多说，写下这篇博客其实也是对自己使用angular将近一年的总结，怕自己入后有些东西忘记。angular及其对手介绍Angular是目前前端的三大框架...