angular4
关注
分享
扫一扫
wu_223
哈喽，大家好，我是一名web前端开发工程师，主用框架angular2以上，涉及的技术以地图leaflet方面居多，写的博客是在开发中遇到的问题，欢迎大家随时找我讨论
展开
-
angular xlsx-style，复杂表头样式导出
angular 导出复杂表头的表格，并加excel样式原创 2024-08-27 16:26:25 · 381 阅读 · 0 评论 -
angular17 打包项目放在了多出了个browser目录
改成"builder": "@angular-devkit/build-angular:browser",把"browser": "src/main.ts",改成"main": "src/main.ts",修改package.json配置文件，把。原创 2024-04-18 21:14:07 · 861 阅读 · 0 评论 -
angular node版本问题导致运行出错时应该怎么处理
angular 中node版本过低运行失败处理方法原创 2024-04-17 19:16:06 · 253 阅读 · 0 评论 -
angular 获取dom的 制定id元素
angular 如何获取到dom的某个id元素原创 2023-03-15 11:39:03 · 718 阅读 · 0 评论 -
FileSaver+XlSX表格导出angular版
file-saver+xlsx表格导出原创 2023-02-02 12:23:15 · 352 阅读 · 0 评论 -
angular 编写menu菜单样式
angular menu菜单原创 2023-01-09 19:24:20 · 509 阅读 · 0 评论 -
angular14 webpack ＜ 5 used to include polyfills for node.js core modules by default.
angular自定义webpack配置原创 2022-06-17 15:08:49 · 1007 阅读 · 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 · 2371 阅读 · 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_小武的博客-优快云博客...原创 2022-03-04 14:10:37 · 1237 阅读 · 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 · 378 阅读 · 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 · 566 阅读 · 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 · 1072 阅读 · 0 评论 -
angular12组件切换移除定时器ngOnDestroy(),clearInterval()
setInterval设定后，组件切换后（anuglar生命周期函数销毁执行方法ngOnDestroy()），定时器还存在，需要移除掉定时器clearInterval()setTime:any;//组件初始化创建定时器ngOnInit(){ this.setTime = setInterval(() => { console.log("每五秒执行一次"); //定时器执行的内容 }, 5000);}//离开组件时执行n原创 2021-10-25 17:02:27 · 1224 阅读 · 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 · 5823 阅读 · 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 · 305 阅读 · 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 · 448 阅读 · 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 · 1167 阅读 · 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 · 1433 阅读 · 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 · 1933 阅读 · 0 评论 -
angular6 路由复用，路由缓存（RouteReuseStrategy）
实现功能：首页有表单查询，以及查询结果，如果点进去详情，再返回首页的时候，表单查询跟结果的状态要保持原状 注：首次登陆的情况下以及单击其余页面的时候，需要清空1. 首先建一个路由缓存文件AppRoutingCacheimport { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteS...原创 2020-04-14 15:28:15 · 1673 阅读 · 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 · 1846 阅读 · 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 · 2863 阅读 · 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 · 3495 阅读 · 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 · 1230 阅读 · 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 · 1216 阅读 · 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 · 1360 阅读 · 0 评论 -
leaflet怎么去掉放大缩小按钮，去掉测量，绘制框
1. 在封装的地方，init下边不放上这些属性2.把这些封装成方法 addZoomCtrl() { //放大缩小按钮 L.control .zoom({ zoomInTitle: "放大", zoomOutTitle: "缩小", position: "bottomright" })...原创 2020-01-02 10:51:03 · 3514 阅读 · 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 · 1640 阅读 · 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 · 642 阅读 · 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 · 3211 阅读 · 0 评论 -
css常用样式
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可...原创 2019-06-21 10:05:53 · 176 阅读 · 1 评论 -
cesium自定义的气泡弹窗（可随球放大缩小，移动）
效果图如下：1. 从后台获取遍历的数据，先遍历循环加上点位 setTimeout(() => { this.UAVpoint.forEach(result => { var pinBuilder = new Cesium.PinBuilder(); var bluePin = this.viewer.en...原创 2019-06-28 10:36:21 · 10228 阅读 · 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 · 6104 阅读 · 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 · 1244 阅读 · 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 · 821 阅读 · 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 · 4773 阅读 · 0 评论 -
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 · 1216 阅读 · 2 评论 -
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 · 6275 阅读 · 0 评论 -
css中div中竖着的文字，可自动换行
成品图形样式如下： 2. 本文中需要用到图标，并且图标需要放在最上边，竖形文字需要放在下边，所以，直接放代码：html代码 <div nz-col class="mainCol" [nzSpan]="5"> <i class="fa fa-map iconClass"><...原创 2018-07-18 17:32:31 · 3603 阅读 · 0 评论 -
leaflet-div上禁止地图的拖动，放大缩小双击事件
1. 先把dom的div对象获取到，可用document.getEleementById("divId"); //获取当前的this对象 const that = this; //获取要操作的div对象，可根据docoment.getElementById("divId"); const el = document.getElementById("divId...原创 2018-08-07 17:07:57 · 9301 阅读 · 1 评论