Angular6
Angular baby
软妹前端开发工程师自留地,专注Angular、Vue。
展开
-
ionic5:那些我在Android平台打包apk时踩的坑(qr-scanner二维码扫描改造)
ionic的打包和发布可以参考下面这篇文章,这里就不赘述了:https://www.jianshu.com/p/457365fc04e01、网页调试没问题,打包成apk,在请求接口时一直报404的错误:解决方法:1、在package.json查看安装的版本。版本为1.3.32、删掉cordova-plugin-whitelistcordova plugin rm cordova-plugin-whitelist3、添加cordova-plugin-whitelistcor原创 2020-05-22 10:35:36 · 985 阅读 · 0 评论 -
手动打包更新项目前端环境(Jenkins崩溃的时候使用)
前几天前端项目使用Jenkins打包总是会报内存溢出的错误(FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory),试了很多解决方法都没办法正常打包,只能自己在本地手动打包,生成镜像后更新前端环境了,具体操作如下:1️⃣在自己本地的项目中使用npm run build,将本地代码打包成dist文件;...原创 2020-03-03 13:57:47 · 619 阅读 · 0 评论 -
Angular:装饰器(注解)是什么?有什么作用?
装饰器/注解就是一个函数,但它是一个返回函数的函数,它属于Typescript的特性,而非Angular的特性。类装饰器(https://www.jianshu.com/p/57ed7747c45d):@NgModule、@Component、@Injectable、@Pipe、@Directive在使用Angular进行开发的时候,我们很多时候都是在设计Component、Modul...原创 2019-12-18 15:55:40 · 1066 阅读 · 0 评论 -
Angular:组件和模块有什么区别?
设计上看,组件(带有@Component装饰器的类)强调重复调用,就像零件一样,一颗螺丝、螺丝帽分别是一个零件——组件化就好比:做一个网站,可以把一个个区域拆成多个组件,比如导航栏是一个组件、编辑区是一个组件、页脚是一个组件,可以尽情拆分,一个组件包含了html、css和js代码,可以简单理解为页面的一块,可以根据需要把它放在页面的任何部位,也可以和其他组件组成新的组件。每个组件对应一个工程目录,...原创 2019-12-18 15:48:15 · 1763 阅读 · 0 评论 -
Angular:修改第三方组件的样式——ng-zorro等组件默认样式的修改
在项目中修改ng-zorro组件默认样式的一些方法:类名等 前加::ng-deep; 类名等 前加:root; 类名等 前加:host /deep/;例如:页面上左侧有一个菜单栏,使用了ant design中的导航栏组件,其中我们想改变导航选中的默认样式,可以先在控制台查看当前组件的类——可以看出来,当前组件的被选中时的样式属于.ant-menu-item-selecte...原创 2019-12-14 13:54:35 · 4635 阅读 · 1 评论 -
前端笔试题整理:活到老学到老②
14、介绍下观察者模式和订阅-发布模式的区别,各自适用于什么场景?答案:观察者模式中主体和观察者是互相感知的,发布-订阅模式是借助第三方来实现调度的,发布者和订阅者之间互不感知:观察者模式就好像 个体奶农和个人的关系。奶农负责统计有多少人订了产品,所以个人都会有一个相同拿牛奶的方法。奶农有新奶了就负责调用这个方法; 发布-订阅模式就好像报社, 邮局和个人的关系,报纸的订阅和分发是由邮局来...原创 2019-10-24 10:40:45 · 176 阅读 · 0 评论 -
Angular:(ngModelChange)没有实时触发的问题解决
在页面上的嵌套表单上,有两个字段分别为金额1(amountOne)和金额2(amountTwo),我想要实现实时捕捉这两个字段的值的变化:限制页面上的金额2要大于金额1。一开始写的代码如下:这两个字段作为editClauseForm表单下的嵌套表单purchaseFlowTempDetailVOList中的两个字段,formControlName分别是amountOne和amounTwo...原创 2019-11-14 13:48:12 · 8300 阅读 · 0 评论 -
Angular:angular中的日期管道的使用,进行日期格式化
angular中的日期管道:{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}其中value为日期表达式,是一个Date对象、数字(从 UTC 时代以来的毫秒数)或一个 ISO 字符串 ;format是一个要包含的日期、时间部分的格式,使用预定义选项或自定义格式字符串——format包括:s...原创 2019-11-12 16:59:36 · 7161 阅读 · 0 评论 -
Angular:页面路由的配置(包含页面的复用)
在模块Module的路由配置模块(routing.module.ts)中进行页面的子路由配置:/*** 子路由配置*/const childRoutes: Routes = [ { path: '', redirectTo: 'list', pathMatch: 'full' }, // 默认路由 { path: 'list', component: Comm...原创 2019-11-12 16:40:43 · 634 阅读 · 0 评论 -
Angular:Invalid Host/Origin header问题解决方案
最近在Chrome浏览器调试的时候遇到一个问题,浏览器的控制台一直报错 Invalid Host/Origin header,在百度上看到也有人遇到过这个问题,参考链接:https://blog.csdn.net/u013243347/article/details/85223016作者给出的解释是这是webpack本身出于安全考虑,因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是,在...原创 2019-08-19 09:21:24 · 4876 阅读 · 0 评论 -
Angular:上传文档时弹出模态框显示报错信息,并可以一键复制文本
今天收到客户的改进意见,原本我们有一个批量上传excel文档的功能,后台进行数据验证,验证数据某行某列有错误时,会将错误信息以数组的形式返回给前端。原本我的实现方法是在前端直接遍历后端返回的报错消息,进行拼接,将某行、某列的错误信息这样直接用NoticeProvider中封装好的方法展示出来,实现的代码如下(typescript):......import { NoticeProvid...原创 2019-08-09 09:57:22 · 744 阅读 · 0 评论 -
Angular:实现为角色授权操作,先选择角色有权限的组织,再选择对当前组织的控制维度
按照要求,实现以下操作:首先点选操作列中的授权按钮,弹出角色授权弹窗; 在弹窗中首先选择要为当前用户赋权的某个组织机构; 选中某个组织机构维度,加载权限列表树,勾选后表示为当前用户赋予了该组织机构下的这个操作权限; 首先,弹窗中的当前角色字段,是从父列表在加载弹窗的时候传入的参数中取出来的:@Input() set data(value: any)...原创 2019-07-22 09:55:16 · 561 阅读 · 0 评论 -
Angular:解决innerHTML绑定页面内容,sanitizing HTML stripped some content警告处理和富文本背景色样式无法正常显示的问题
背景:在系统中使用quill富文本编辑器,使用的版本是ngx-quill@4.0.0,具体使用方法参见我的另一篇博客 Angular:ngx-quill富文本编辑器的使用(地址:https://blog.csdn.net/qq_36451496/article/details/88971422)其中用富文本编辑好的表单内容这样在页面上展示: <div nz-col [nzSpa...原创 2019-07-17 17:20:02 · 1660 阅读 · 0 评论 -
Angular:百度地图引用报错A parser-blocking, cross site (i.e. different eTLD+1) script
接着上一篇Angular:引用百度地图教程(地址:https://blog.csdn.net/qq_36451496/article/details/96111699)来说说,有的小伙伴可能直接在百度地图开放平台上(地址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey),直接跟着它的说明引用了百度地图的API文件,在in...原创 2019-07-18 15:47:27 · 2722 阅读 · 0 评论 -
Angular:安装指定Angular CLI版本
我们可能会发现按照网上的方式下载安装后,使用Angular CLI生成的项目并不是我们想要的Angular的版本,因为在我们没有指定安装版本的前提下,默认会下载最新的版本安装,然而不同的Angular CLI版本在生成项目时默认的使用的Angular的版本又是不一样的,不同版本有些实现又存在差异,所以为开发者造成了很大的麻烦,下面我们来介绍一下安装指定的Angular CLI的方法(本文安装的An...转载 2019-08-28 11:11:51 · 2594 阅读 · 0 评论 -
Angular:引用百度地图教程
今天实现了在项目中引用百度地图,先看一下效果图:第一步:先在百度地图开放平台申请百度地图密钥(申请链接:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)按照网站提示填写应用信息,申请好之后,记住自己的ak码。注意如果在浏览器使用的话,因新系统升级,“服务端AK”不再支持浏览器端使用;在浏览器端使用,请选择...原创 2019-07-16 11:00:35 · 1587 阅读 · 1 评论 -
Angular:列表查询条件上的日期字段的格式转化(转换成yyyy-MM-dd)
今天发现列表上面带有日期格式的查询条件的页面,每次带有查询条件查询都会有点问题,表现在第一次对某个日期进行格式转换(转换成yyyy-MM-dd格式)后,不改变日期,再次带这个日期查询列表,由于之前已经转换成了yyyy-MM-dd格式,所以这里再次转换就会报错,修改前的代码:HTML:<nz-form-control *ngIf="control.type === 'date' &a...原创 2019-08-19 17:37:15 · 2243 阅读 · 0 评论 -
Angular:多选搜索框默认显示多个搜索条件
一个小细节问题,使用AntDesign的组件,一个多选框想要默认显示多个搜索条件时,初始化的时候应该怎么做:首先HTML上:<nz-form-control> <nz-select nzMode="multiple" nzPlaceHolder="请选择" [formControlName]="bStatus" nzAllowClear="true"...原创 2019-08-21 15:07:07 · 1249 阅读 · 0 评论 -
Angular:页面上输入框自动获取焦点
方法一:在component.ts上,ngOnInit()中写这个方法:document.getElementById('getGuid').focus();并且将id绑定到HTML上的输入框上:<input nz-input formControlName="guid" id="getGuid" placeholder="请输入生产批号">方法二:直接在H...原创 2019-08-21 19:25:29 · 5507 阅读 · 5 评论 -
Angular:Error:Loading chunk {n} failed.问题的解决思路
代码打包发布,在测试环境运行的时候经常会有路由跳转卡住的情况,就是点击菜单时,对应的页面出不来,还停留在原来的页面。上网搜了半天,感觉很多讨论都是不了了之,有的人说目测是因为不稳定的网络连接和浏览器的缓存错误,我看了下控制台的报错信息,想到会不会是index.html文件中引入的一些依赖找不到导致的问题呢,就大概改了下。首先,index.html修改前:<!DOCTYPE ht...原创 2019-08-26 10:03:50 · 5869 阅读 · 3 评论 -
Angular:ERROR in Cannot find module 'node-sass'以及ModuleBuildError: Module build failed问题
首先是sass Loader版本的问题。打包后,控制台报错:Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does...原创 2019-08-27 16:56:37 · 4624 阅读 · 0 评论 -
Angular:自动更新package.josn里的版本号
在使用packages.json一段时间之后发现有部分依赖包有了新的版本,如何将package.json中的依赖更新为最新版呢?1、安装npm install -g npm-check-updates2、更新项目package文件ncu -u————————————————版权声明:本文为CSDN博主「银哥」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上...转载 2019-08-28 09:15:29 · 2069 阅读 · 0 评论 -
Angular:浏览器[DOM]Input elements should have autocomplete attributes (suggested: "current-password")
Chrome浏览器控制台总是会提示:[DOM] Input elements should have autocomplete attribute(suggested: "current-password"): (More info: https://goo.gl/9p2vKq)这个是由于input元素应具有autocomplete属性,此功能主要是记住输入内容,下次提交表单或者浏览器回退后,...原创 2019-08-30 17:28:22 · 3566 阅读 · 0 评论 -
Angular:嵌套表单的验证
Angular6嵌套表单的验证嵌套表单ngOnInit()中的表单验证初始化表单的方法表单验证的方法保存方法中怎么取到每个字段页面中表单的写法效果嵌套表单ngOnInit()中的表单验证以下文代码为例,表单validateForm中包含三个子表单,每个表单中有一定的字段值,初始化表单验证:ngOnInit() {this.validateForm = this.fb.group({bi...原创 2018-12-04 18:20:39 · 2519 阅读 · 0 评论 -
Angular:动态判断字段是否输入,控制某按钮是否可用(按钮的[disabled]属性)
要求:忘记密码页面,输入手机号后才能点击“获取短信验证码”按钮,输入验证码后才能点击“下一页”按钮。方法:1.定义两个全局变量用于动态判断是否输入了手机号和短信验证码:2.初始化表单中动态验证是否填写了要求的两个字段,实时改变两个全局变量的值(boolean):3.页面上将两个用于判断状态的全局变量绑定到按钮的disabled属性上:这样就可以实时的取到用户的输入,进行...原创 2018-12-17 14:57:59 · 2909 阅读 · 0 评论 -
Angular:解决项目打包发布后,前端静态图片在测试环境无法显示的问题
今天前端页面的一些静态图片显示出现了一些问题,之前我让图片在测试环境显示的方法都是直接在Xshell上将本地图片直接上传到服务器,参考我之前的blog:https://blog.csdn.net/qq_36451496/article/details/91798366今天后端小哥说,实际上前端的一些静态图是可以直接打包发布的,不用预先存到服务器上,所以就把服务器中存图片的assets文件夹备份...原创 2019-06-27 16:24:08 · 5086 阅读 · 0 评论 -
Angular起步——环境搭建
Angular起步——环境搭建Angular的开发环境搭建Nodejs安装安装Angular Cil开发工具Visual Studio Code的安装创建Angular项目Angular的开发环境搭建Nodejs安装我们使用的Angular6前端开发框架需要安装Node.js的8.x或10.x版本。可以在下面的网站下载安装包:https://nodejs.org/en/download/...原创 2019-05-07 15:35:36 · 627 阅读 · 0 评论 -
ionic:点击某个商品名称,跳转到相应的商品详情页面
实例:在采购单审批页面(procurement),点击“商品名称”字段,跳到新的商品信息(goods-details)的详情页,其中商品信息通过点击的商品名称的id来查到:首先要在商品名称上面绑定一个点击跳转的方法:<ion-item tappable (click)="viewGoods(item.itemId,item.specificationId)"> <...原创 2019-01-16 15:49:05 · 1906 阅读 · 0 评论 -
Angular:常见问题集锦
一、提供商注册到模块中还是组件中?1.通常,优先把模块中具体特性的提供商注册到模块中(@NgModule.providers),而不是组件中(@Component.providers)。应该把全应用级提供商添加到根模块AppModule中,而不是还是根组件AppComponent中这是因为惰性加载模块及其组件可以注入AppModule中的服务,却不能注入AppComponent中的。...原创 2019-01-21 14:35:18 · 273 阅读 · 0 评论 -
HTML attribute 与 DOM property 的对比
要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute 和 DOM property 之间的区别。attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。 少量 HTML attribute 和 property 之间有着 1:1 的映射,如id。 有些 HTML attrib...转载 2019-01-25 11:31:09 · 156 阅读 · 0 评论 -
Angular:常见问题集锦(2)
一、当一个服务中需要别的服务时怎么做?当服务需要依赖时,我们也可以用构造函数注入模式来添加一个带有别的依赖的构造函数。例如在HeroService服务中需要Logger的服务:import { Injectable } from '@angular/core';import { HEROES } from './mock-heroes';import { Logger ...原创 2019-01-24 15:16:23 · 259 阅读 · 0 评论 -
Angular6笔记(5)
1.构造函数——构造函数是当类进行实例化时执行的特殊函数。通常会在构造函数中对新对象进行初始化工作: 构造函数必须命名为constructor。因为构造函数是在类被实例化时调用的,所以它们可以 有输入参数,但不能有任何返回值。我们要通过调用new ClassName()来执行构造函数,以完成类的实例化。 PS:在TypeScript中,每个类只能有一个构造函数。2. 继承:面向对象的另...原创 2019-01-08 09:10:52 · 640 阅读 · 0 评论 -
Angular:发送手机验证码按钮倒计时效果实现
1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime):countDown = false;countDowmTime = 60; // 这里设置倒计时为60SshowButtonText = '发送短信验证码'; // 可以控制动态改变的按钮提示信息2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按...原创 2018-12-18 15:22:19 · 914 阅读 · 0 评论 -
Angular6笔记(2)
1.产品目录结构树:(1).category-provider.ts:调接口取出目录树结构数据: /** * 使用后端拼装好的tree结构数据 */ public getCategoryTreeData(): Observable<any> { return new Observable(observable$ => { this.h...原创 2018-12-12 16:38:17 · 390 阅读 · 0 评论 -
Angular6 笔记(1)
1.app.config.ts中进行系统参数配置:export class AppConfig { // 系统配置 app = { title: '朗朗供应商', // 系统名称 systemName: 'xcloud', // 标识系统分类,根据不同系统进行配置 code: 'zs', ver: '1.0' }; // 参数配置 ...原创 2018-12-10 11:37:25 · 257 阅读 · 0 评论 -
Angular6笔记(4)
1.isArray()方法用于判断是否是数组,用法Array.isArray():e.g:Array.isArray([]); // 返回true Array.isArray(); // 返回false Array.isArray([1]); Array.isArray({ }); Array.isArray(new Array()); Array.isA...原创 2018-12-26 15:28:31 · 880 阅读 · 0 评论 -
Angular:使用属性控制不同状态的登录用户看到不同的菜单
1.在主页的json文件中(menu.json)给左侧目录树中的各个节点添加一个isShow属性:{"code": "200","msg": "Success","_commment": "菜单接口","datas": [{"id": "1","menuCode": "10","menuName": "首页", ------一级节点"menu...原创 2018-12-06 16:34:49 · 1781 阅读 · 0 评论 -
Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等,而@HostListener()可以监听宿主元素上的事件。举例:实现一个在输入时实时改变字体和边框颜色import { Directive, HostBinding, HostListener } from '@angular/core...转载 2019-01-29 15:50:49 · 6033 阅读 · 0 评论 -
Angular基础培训--2019/2/22
本框架是基于目前流行的三大框架之一的Angular ,通过Angular CLI命令构建的,UI组件是基于阿里的NG-ZORRO的组件库,基于此搭建的企业级后台管理平台。1、环境搭建:安装Nodejs,angular需要Node.js的8.x或 10.x版本;安装Angular CLI , npm install -g @angular/cli当前框架版本要求angular6....原创 2019-02-22 11:44:00 · 515 阅读 · 0 评论 -
Angular:nz-table中显示横向滚动条
首先,可以参考一下ant-design官方文档中对于横向滚动条的用法(这里参考1.8.1版本的固定列方法):import { Component } from '@angular/core';@Component({ selector: 'nz-demo-table-fixed-columns', template: ` <nz-table #nzTable [nz...原创 2019-03-13 11:33:45 · 9954 阅读 · 6 评论