![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular4
wu_223
哈喽,大家好,我是一名web前端开发工程师,主用框架angular2以上,涉及的技术以地图leaflet方面居多,写的博客是在开发中遇到的问题,欢迎大家随时找我讨论
展开
-
angular17 打包项目放在了多出了个browser目录
改成"builder": "@angular-devkit/build-angular:browser",把"browser": "src/main.ts",改成"main": "src/main.ts",修改package.json配置文件,把。原创 2024-04-18 21:14:07 · 523 阅读 · 0 评论 -
angular node版本问题导致运行出错时应该怎么处理
angular 中node版本过低运行失败处理方法原创 2024-04-17 19:16:06 · 171 阅读 · 0 评论 -
angular 获取dom的 制定id元素
angular 如何获取到dom的某个id元素原创 2023-03-15 11:39:03 · 600 阅读 · 0 评论 -
FileSaver+XlSX表格导出angular版
file-saver+xlsx表格导出原创 2023-02-02 12:23:15 · 278 阅读 · 0 评论 -
angular 编写menu菜单样式
angular menu菜单原创 2023-01-09 19:24:20 · 436 阅读 · 0 评论 -
angular14 webpack < 5 used to include polyfills for node.js core modules by default.
angular自定义webpack配置原创 2022-06-17 15:08:49 · 938 阅读 · 0 评论 -
angular2显示与隐藏 *ngIf [hidden]
1. *ngIf是直接删掉相关的div echartVisable=true <div *ngIf="echartVisable">显示</div> <div *ngIf="!echartVisable">删除</div>2. [hidden]只是隐藏,div还在 echartVisable=true <div [hidden]="!echartVisable">显示</div> <div...原创 2022-04-02 14:56:18 · 2281 阅读 · 0 评论 -
Cannot find name ‘require‘. Do you need to install type definitions for node? Try `npm i @types/node
如果出现以下错误, 需要声明一下requireangular没有require的用法,require是node的语法,所以在用的上边先声明一下declare var require;此用法我在另一篇文章中有用:leaflet 绘制图标 marker-icon-2x 404_小武的博客-CSDN博客...原创 2022-03-04 14:10:37 · 1153 阅读 · 0 评论 -
table点击表格背景颜色变化,表格跟其余联动点击
效果如下:1. 表格代码 <nz-table #infoTable [nzData]="infoData" [nzScroll]="{ y: '350px', x: 'auto' }" [nzShowPagination]="false" nzFrontPagination="false" > <thead> <tr> <th>名.原创 2021-12-16 14:44:11 · 326 阅读 · 0 评论 -
initial exceeded maximum budget. Budget 1.00 MB was not met by 788.29 kB with a total of 1.77 MB.
angular12 打包出现问题,如下图解决方法 angular.json中修改budgets参数 "budgets": [ { "type": "initial", "maximumWarning": "15mb", "maximumError": "20mb" } ]...原创 2021-10-25 17:31:12 · 502 阅读 · 0 评论 -
angular12获取当前路径Location.path()
import { Location } from '@angular/common';import { Component, OnInit } from '@angular/core';export class LayoutComponent implements OnInit { constructor( private location: Location ){} ngOnInit(){ //如果访问路径是这个的话http://localhost:4200.原创 2021-10-25 17:25:47 · 989 阅读 · 0 评论 -
angular12组件切换移除定时器ngOnDestroy(),clearInterval()
setInterval设定后,组件切换后(anuglar生命周期函数销毁执行方法ngOnDestroy()),定时器还存在,需要移除掉定时器clearInterval()setTime:any;//组件初始化创建定时器ngOnInit(){ this.setTime = setInterval(() => { console.log("每五秒执行一次"); //定时器执行的内容 }, 5000);}//离开组件时执行n原创 2021-10-25 17:02:27 · 1148 阅读 · 1 评论 -
元素隐式具有“any” 类型,因为索引表达式的类型不为‘number‘ (angular12集成cesium)
1. 错误写法为:window["CESIUM_BASE_URL"]="src/assets/cesium"2. 正确写法为:(window as any).CESIUM_BASE_URL = 'src/assets/cesium/';原创 2021-05-27 15:33:50 · 5737 阅读 · 1 评论 -
angular9发布流程
1. npm run build"build": "ng build --prod --base-href /lr/",2. index.html<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Lr</title> <base href=""> <meta name="viewport" cont原创 2021-03-22 13:59:22 · 282 阅读 · 0 评论 -
angular9 对接接口的方式,form、params
1. form表单提交 const form = new FormData(); form.append("uEmail", user.email); form.append("uRemark", user.uRemark); //headers包含传递的token值 this.http.post("http://地址", form, { headers: headers })2. params方式提交import {HttpParams } from '原创 2021-01-08 16:06:50 · 417 阅读 · 0 评论 -
angular9 sessionStorage存值跟取值(对象)
1. 存一个字符串sessionStorage.setItem("name","小武") //存值sessionStorage.getItem("name"); //取值2. 存对象 1》存值 sessionStorage.setItem( "currentUser", JSON.stringify({ userName: res["data"]["username"],...原创 2021-01-08 15:58:42 · 1108 阅读 · 0 评论 -
angular6 双击的时候禁止单击事件产生dblclick
代码如下所示: html代码如下: <div class="item" (click)="clickF()" (dblclick)="dblclickF()"> </div> ts代码如下: //定义两个全局变量 isdb; timeout; //单击方法 clickF() { this.isdb = false; var that=this; ..原创 2020-06-30 16:25:37 · 1384 阅读 · 0 评论 -
echarts+(html+js+css)左边列表,拖拽到右边生成流程树
效果如下图所示:(左边拖动到右侧,可添加跟删除等操作,最后进行提交)1. 本文依附echarts,所以需要去引入echart.min.js, 官网下载地址:https://echarts.apache.org/zh/download.html2. html代码:(本文是angular6+UI框架ng-zorro,也可自己手写样式)<nz-layout> <div nz-row class="titlek"> 新建流程 &...原创 2020-06-09 15:33:20 · 1827 阅读 · 0 评论 -
angular6 路由复用,路由缓存(RouteReuseStrategy)
实现功能:首页有表单查询,以及查询结果,如果点进去详情,再返回首页的时候,表单查询跟结果的状态要保持原状 注:首次登陆的情况下以及单击其余页面的时候,需要清空1. 首先建一个路由缓存文件AppRoutingCacheimport { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteS...原创 2020-04-14 15:28:15 · 1602 阅读 · 0 评论 -
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件($event.cancelBubble=true;)
要求,angular6中屏蔽父元素的点击事件($event.cancelBubble=true;)<div (click)="select($event)"> <div (click)="delete(node);$event.cancelBubble=true;"></div></div>...原创 2020-04-07 13:35:43 · 1739 阅读 · 0 评论 -
leaflet绘制图形,wkt模式与geoJson互转
setTimeout(() => { map.on('draw:created', function (event) { var layer = event.layer; var wkt = new Wkt.Wkt(); //json转换成wkt模式 var kk=wkt.read(JSON.st...原创 2020-03-25 16:53:06 · 2664 阅读 · 1 评论 -
angular6 input回车事件-(keydown)
1. html中如下所示:<input style="margin-bottom:5px;" nz-input placeholder="输入关键字" [(ngModel)]="taskName" (keydown)="calAge($event)">2. ts中代码如下所示: calAge(e){ var evt = window.event || e;...原创 2020-03-25 16:05:08 · 3444 阅读 · 0 评论 -
angular2 中引入 angular-in-memory-web-api 以及出现的问题
1. 安装angular-in-memory-web-apinpm install --save angular-in-memory-web-api@0.5.4 注意:此项操作必须安装0.6.0以下,超过此版本会出现数据无法读取等问题(404等路由问题)2. 新建一个文件夹目录如下:src\app\todo\todo-data.tsimport {InMemoryDb...原创 2020-03-05 14:15:58 · 1168 阅读 · 0 评论 -
ng-zorro 修改原框架的样式
1. 修改原框架鼠标移入(表格,时间框)的颜色 找到原框架的class,然后前边加上这个:host ::ng-deep,修改背景色为none就可以了:host ::ng-deep .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,.ant-table-tbody>...原创 2020-01-08 17:24:27 · 1137 阅读 · 1 评论 -
angular6 xml文件解析成json数据,json数据生成xml
1. 从后台读取xml数据,读取结果,话不多说,直接上代码 var kk = "<root><satellite>GF3</satellite><sensor>SAR</sensor><level>LEVEL1A</level><startTime>2017-01-20 11:02:34....原创 2020-01-08 11:16:28 · 1321 阅读 · 0 评论 -
leaflet怎么去掉放大缩小按钮,去掉测量,绘制框
1. 在封装的地方,init下边不放上这些属性2.把这些封装成方法 addZoomCtrl() { //放大缩小按钮 L.control .zoom({ zoomInTitle: "放大", zoomOutTitle: "缩小", position: "bottomright" })...原创 2020-01-02 10:51:03 · 3319 阅读 · 0 评论 -
js获取url传递过来的参数
//地址:http://www?username=小武,控制台打印 小武console.log(getParams("username")); function getParams(name) { var pos, str, para, parastr; var array = [] str = window.location.href; if ...原创 2019-06-13 15:17:05 · 1613 阅读 · 0 评论 -
angular6打包出现错误-JavaScript heap out of memory
1. 错误如下所示: 2.解决方法: 在node_modules包中的.bin文件下的ng.cmd、ngc.cmd加入--max-old-space-size=8192 3.这样再重新打包就不会报错了: npm run build...原创 2019-06-13 17:55:50 · 608 阅读 · 0 评论 -
纯html+css三级菜单
效果图如下:第一种方法:ul li#nav {line-height: 72px; list-style-type: none;color:#ffffff}#nav a {display: block; width: 150px; text-align:center; height:72px;color:#ffffff}#nav a:link { text-deco...原创 2019-06-11 14:22:34 · 3130 阅读 · 0 评论 -
css常用样式
<p class="main">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可...原创 2019-06-21 10:05:53 · 111 阅读 · 0 评论 -
cesium自定义的气泡弹窗(可随球放大缩小,移动)
效果图如下:1. 从后台获取遍历的数据,先遍历循环加上点位 setTimeout(() => { this.UAVpoint.forEach(result => { var pinBuilder = new Cesium.PinBuilder(); var bluePin = this.viewer.en...原创 2019-06-28 10:36:21 · 10075 阅读 · 3 评论 -
cesium实时获取卫星的动态信息,包括经纬度和名称(onTick)
效果如图下显示,实时获取经纬度,显示到二维图上:1. 添加卫星,然后监听方法: this.viewer.dataSources.add(Cesium.CzmlDataSource.load('czml文件名称')).then(dataSource => { var satellite = dataSource.entities.getById("...原创 2019-07-03 11:12:51 · 5924 阅读 · 6 评论 -
angular6中引入cesium
引入结果:1. 下载cesium和cesium-typings包 npm install cesium --savenpm install --save e-ngx-cesium@latest2. 在main.ts中放入 window['CESIUM_BASE_URL'] = 'src/assets/cesium';具体位置要注意i...原创 2019-06-28 11:02:39 · 1190 阅读 · 7 评论 -
angular6 Cannot read property 'split' of undefined
我遇到这个问题一般都是路由配置有误,我的导航是这样this.router.navigate(["home/ecoloMenu/ecologyEvaluation/ecologicalFactors/mountain/greenRate"]);到ecologyEvaluation这一层的时候,写错了配置const routes: Routes = [ { path:...原创 2019-09-29 10:25:12 · 794 阅读 · 0 评论 -
js获取的当前时间的月份--getFullYear()、getMonth()、getDate(),本示例是获取当前月份的开始跟结束
1. 首先获取当前时间的月份值 var e=new Date()2. 然后从当前时间获取年份跟月份进行拼接,分开始时间和结束时间(本月初到下个月月初即本个月的值) this.startTime=e.getFullYear()+"-"+(e.getMonth()+1)+"-1"; if((e.getMonth+1)==12){ this.endTime=e.getF...原创 2018-05-22 11:25:51 · 4720 阅读 · 0 评论 -
leaflet 加载arcgis图层(esri-leaflet.js中的identify方法),点击事件,获取保护区,面积
1.需要用到esri-leaflet.js,然后放到项目中 npm install esri-leaflet --save2. 先保护区放到地图上var envLayer = L.esri.dynamicMapLayer({url:"mapserver的url",opacity: 0.8,transparent: true});map.addLay...原创 2019-05-30 14:51:44 · 3206 阅读 · 4 评论 -
angular4使用的前端控件
bootstrap: http://www.bootcss.com/nz-zorro: https://ng.ant.design/#/docs/angular/introduce primeNG: https://www.primefaces.org/primeng/#/inputtext树形结构(ng2-tree): https://www.npmjs.com/package/ng2-tre...原创 2018-03-14 10:49:48 · 1183 阅读 · 2 评论 -
ng-zorro0.7.1+angular5: Missing locale data for the locale "zh-cn".
DatePicker日期选择框如出现以下错误:nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持,需要在 main.ts文件中 引入相应的 Angular 语言包。import { registerLocaleData } from '@angular/common';import zh from '@angular/common/locales/zh';...原创 2018-06-05 11:03:12 · 2983 阅读 · 1 评论 -
angular4时间转换,js保留两位小数点(分值转换),angular4前端管道保留两位小数,时间格式化(管道)
一、 angular4时间转换1. var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");2. 在ts中注入datePipe管道,import { DatePipe } from '@angular/common'; constructor( private datePipe: DatePipe ) {}再mod...原创 2018-05-29 15:26:43 · 6230 阅读 · 0 评论 -
css中div中竖着的文字,可自动换行
成品图形样式如下: 2. 本文中需要用到图标,并且图标需要放在最上边,竖形文字需要放在下边,所以,直接放代码:html代码 <div nz-col class="mainCol" [nzSpan]="5"> <i class="fa fa-map iconClass"><...原创 2018-07-18 17:32:31 · 3518 阅读 · 0 评论