Angular
晓晓是个打字员
这个作者很懒,什么都没留下…
展开
-
angular中搜索框指令
之前,我们介绍过angular的请求防抖debounce,可以优化搜索过程。鉴于,输入搜索,在整个项目中,应用会相对频繁,所以,我们可以抽离出来,写成一个指令:import { Directive, HostListener, ElementRef, Input, Output, EventEmitter } from '@angular/core';import { Subject, Sub...原创 2019-11-13 13:55:41 · 389 阅读 · 0 评论 -
angular请求的防抖(debounce)
在开发项目过程中,我们会遇到这样的场景:当用户在搜索框中输入名字时,当用户输入完毕后,自动发送搜索请求,实时响应;而不是多按一个按钮或者回车键。如果按照常规思路,我们会绑定input的keyup事件,每次击键后,执行相对应的请求函数。但是,如果每次击键都发送一次请求,会造成请求过多,成本太昂贵了。 最好能等到用户停止输入时才发送请求。那么,使用 RxJS 的操作符就能轻易实现它,参见下面的...原创 2019-11-07 11:16:39 · 2134 阅读 · 0 评论 -
angular指令——判断鼠标是否在dom内
用过angular material中的dialog组件的,都知道,默认情况下,你点击非弹窗的区域,弹窗会自动关闭。如果不需要自动关闭,可以用disableClose:true来进行限制。而我们在写自定义组件的时候,也常常会遇到,打开一个dom后,希望点击空白,这个dom就隐藏不显示。这个时候,就需要我们自己写一个指令,来对鼠标事件做一个判断。1.创建一个clickOutsideClose.d...原创 2019-11-07 09:46:18 · 461 阅读 · 0 评论 -
angular封装组件——时间选择控件
目标:实现如图功能(可扩展成年选择器,年-月选择器,年月日选择器)第一步:先创建shared文件夹,该文件夹可以放一些常用的组件:第二步:编写控件(date):有两个需要注意的地方:@ViewChild,使用这个的时候,angular 8 Expected 2 arguments,需要有两个参数;@Input() type,这个是用来接收时间类型(‘yearPicker’,‘mo...原创 2019-11-06 14:14:05 · 1244 阅读 · 0 评论 -
Angular管理共享组件
目标:将使用频繁的组件抽离出来,集中管理;以便在需要使用的地方,方便快速引用;第一步:创建一个shared component:(该文件夹下,放置需要抽离的组件)ng generate component shared第二步:在shared.module.ts文件里,声明需要共享的组件并export出去:(以date组件为例)第三步:在app.module.ts里引用shared模块...原创 2019-11-06 14:09:32 · 554 阅读 · 0 评论 -
Angular+Leaflet 封装map component
map.component.ts:首先,引入leaflet和translate:import * as L from 'leaflet'; import { TranslateService } from '@ngx-translate/core'; //根据语言来加载不同的layer然后定义下template:@Component({ selector: 'my-map',...原创 2019-05-06 09:23:28 · 634 阅读 · 0 评论 -
Angular子级路由
如图,项目结构中,有多层子级路由:app下,有home,location和others三个子级;而others里,又含有page1,page2和page3。当应用比较庞大的时候,经常会遇到这种多重子级的问题,如果都放到app-routing.module.ts文件里,就不是很合理;我们来看看官方文档怎么说:Some modules, like AppModule, must be load...原创 2019-06-11 14:03:25 · 190 阅读 · 0 评论 -
前端数据导出excel表格
1.安装依赖:npm i file-saver2.引入模块:import {saveAs} from 'file-saver';3.拼接数据格式:let fileData =['车牌号','所属公司','所属车队','车架号','运行状态','车内温度','车外温度','设备状态','更新时间'];for(let item of data){ fileData =[fileDat...原创 2019-06-05 09:53:09 · 1337 阅读 · 0 评论 -
angular中利用ViewChild传递数据
在项目中,有些可以公用的组件,一般我们就抽离出来,然后在需要用到的页面,再引入进来。那么,当我们不仅仅需要共用组件的UI显示,还需要用到组件里的变量时,我们就可以用viewchild来获取。具体做法如下:一、确认page.component.ts中正确引入组件:二:在page.component.ts中,引用: @ViewChild(CommonComponent) common;三、...原创 2019-06-12 11:16:06 · 317 阅读 · 0 评论 -
Anglar 上传文件
背景:angular +angular material;需求:上传文件并传到数据库;file.html:file.ts仔细查看请求头,会发现content-type会跟其他的接口有不一样:formData对象的使用:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects...原创 2019-04-15 14:57:40 · 93 阅读 · 0 评论 -
Angular报错汇总(持续更细)
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘disabled: true’. Current value: ‘disabled: false’.解决方法:@Component({selector: ’ ',templa...原创 2019-03-06 11:23:45 · 327 阅读 · 0 评论 -
angular自定义分页组件
背景:angular 7 + angular material效果图:paginator.component.html:在这里插入代码片原创 2019-02-26 15:42:46 · 333 阅读 · 0 评论 -
Angular中NPM包的package.json
1.package.json 文件中的包被分成了两组:dependencies 是运行应用的基础。devDependencies 只有在开发应用时才会用到。2.要想添加新的 devDependency,请使用下列命令之一:npm install --dev <package-name>yarn add --dev <package-name>...原创 2019-01-24 14:52:30 · 566 阅读 · 0 评论 -
Angular写一个分页控件
paginator.component.html&lt;div class="row page-bar"&gt; &lt;div class="left" style="flex:1;"&gt; &lt;span class="size-item"&am原创 2019-01-28 15:02:10 · 183 阅读 · 0 评论 -
如何在angular使用echarts
背景/框架:Angular 7 + echarts文件结构:在做项目的过程中,经常能遇到有些信息需要用图表来展示;这时候,我们就会想起百度的echarts,方便快捷好用…那如何在angular中使用echarts呢?首先,我们得install相关模块:npm install echarts -Snpm install ngx-echarts -Snpm install @t...原创 2019-02-14 17:33:29 · 606 阅读 · 0 评论 -
angular 发布项目及可能遇到的报错
根据官方文档,我们可以通过下面三个步骤,将项目发布到服务器上:1.使用开发环境进行构建:ng build --prod ;2.把输出目录(默认为 dist/)下的每个文件都复制到到服务器上的某个目录下;3.配置服务器,让缺失的文件都重定向到 index.html 上;一切都很好,但是你也可能遇到这种问题:只要点击刷新,network一直报错404…那么应该怎么解决这个问题呢?如上...原创 2019-02-22 15:00:57 · 344 阅读 · 0 评论 -
form.group中某个字段不可修改
框架:angular 7+ angular material如下图,如果是直接在dom上使用disabled,那么在控制台,你会发现官方给你的优化提示:所以,如果使用下图的写法,将会更好:...原创 2019-02-12 16:26:40 · 735 阅读 · 0 评论 -
初步使用Angular表单form.group
框架:angular 7+ angular material;如图,使用new FormGroup();此时可能遇到的问题有:问题一: 这个是因为你没有引入forms的相关模块:如上图所示,即可解决该问题。························································································...原创 2019-02-19 14:55:10 · 1236 阅读 · 0 评论 -
Angular开发环境跨域问题
开发背景:Angular7 +Angular Material;本地开发遇到跨域时,network会提示failed;这时候我们可以通过以下几个步骤来进行代理:步骤一:建立一个proxy.conf.json文件,文件放置位置如下图;步骤二:配置proxy.conf.json文件;{ "/": { //必须,相当于一个标识 "target": "http://www.t...原创 2019-03-01 16:55:43 · 583 阅读 · 0 评论 -
angular自定义共享模块
在开发项目过程中,我们常常遇到一些功能相似,UI相同的组件;这时候,我们会希望通过写一个能用公用的组件,来提升我们的开发效率。以开发一个分页组件为例,我们来看看如何使用share component:开发背景:Angular 7 + Angular Material;首先,我们先来创建一个component放在common文件夹中(common文件夹是放所有公用组件的地方):ng gene...原创 2019-02-26 14:55:17 · 470 阅读 · 0 评论 -
创建Angular新项目
在创建一个angular项目之前,首先要确保开发环境中已经安装有Node.js和npm包管理器。其中,Node.js要求版本是8.x或者是10.x。如果不确定开发环境中是否安装了Node.js,可以使用node -v来查看Node.js的版本;同样的,可以使用 npm -v 来查看npm包管理器当前的版本信息。当开发环境中已经安装有Nodejs和npm package manager的时候,就...原创 2019-01-24 14:36:44 · 250 阅读 · 0 评论