Angular
文章平均质量分 66
Angular 学习笔记
wujiayucn
选一个自己喜欢的方向,一条道走到黑!
展开
-
Angular学习笔记89: 父子组件内容投影进阶
实际开发过程的场景在实际开发过程中,会遇到讲一个DOM 作为一个Input传给子组件,然后在子组件投影渲染出来。子组件设置默认投影子组件设置多个投影在父组件中使用投影中的上下文内容具体实现创建两个组件,一个父组件ContentShadowUseComponent,一个子组件ContentShadowComponent子组件设置默认投影在子组件ContentShadowComponent中设置单插槽投影,可以使用<ng-content></ng-content>原创 2021-12-31 15:02:39 · 898 阅读 · 0 评论 -
Angular学习笔记88:Angular12中使用crypto-js运行提示Warning
在Angular的12版本中,使用了webpack的5.42.0版本,在这种情况下,使用crypto-js会出现如下提示信息,虽然不影响项目运行,在开发过程中会很难受。./node_modules/crypto-js/core.js:43:22-39 - Warning: Module not found: Error: Can't resolve 'crypto' in '/Users/wjy/WebstormProjects/ng12/devops-web-ng12/node_modules/cryp原创 2021-09-14 12:52:51 · 1378 阅读 · 0 评论 -
前端构建设置通用的环境变量以及遇到的问题
在前端构建打包的时候,经常会遇到根据当前环境去做一些不同的操作在Windows中设置在Win中,在package.json 的构建命令中使用set命令设置{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build:dev":"echo \"Build\" && set ENV_CONFIG=dev && nod原创 2021-03-31 18:51:27 · 766 阅读 · 0 评论 -
Angular学习笔记87:修改NG-ZORRO中Modal、Dropdown等组件挂载DOM
在做前端微服务化拆分的时候,当微应用是在主应用的某一个子路由的时候,即:子应用是挂载在主应用的某一个元素上的时候,子应用的Modal、Dropdown等组件会出现样式丢失的情况。分析原因在子应用的Modal、Dropdown等组件使用的时候,会在主应用的body中append一个div元素,这个元素的class属性为cdk-overlay-container(这个很重要),但是由于当前的body是主应用,并不是子应用的body,两个应用的样式隔离,此时当前的这个组件是获取不到属于自己子应用的样式的。原创 2021-03-27 21:05:32 · 871 阅读 · 0 评论 -
Angular学习笔记86:做一个简单的复制内容到剪切板的组件
复制内容到剪切板是一个很常见的操作生成一个组件 copyClipboard执行命令ng generate component copyClipboardCREATE src/app/component/copy-clipboard/copy-clipboard.component.less (0 bytes)CREATE src/app/component/copy-clipboard/copy-clipboard.component.html (33 bytes)CREATE src/app/原创 2020-11-06 18:04:20 · 525 阅读 · 0 评论 -
解决内网环境下已经同步了依赖,执行 npm install 依旧失败的问题
在前端项目中,有时候会遇到在内网环境中构建打包,这个时候由于需要安装依赖,在内网中搭建了 nexus但是这个nexus并没有连接外网,只能通过工具将依赖在可以连接外网的环境下,将依赖下载下来,打包复制到内网环境中,将这些依赖上传到nexus,这样就可以做到即使在连接不上外网的情况下,也是可以顺打包构建的,但是有时这里也会有很大的一个坑。因为有些包是从github 或者非当前这个 nexus下载的,所以这个时候会造成执行安装依赖 npm install失败,解决这个问题的步骤1. 生成 package-l原创 2020-11-03 12:06:12 · 4661 阅读 · 0 评论 -
Angular学习笔记85:NG-ZORRO 树状表格惰性加载数据的实现
在使用 NG-ZORRO的树状表格时,官方提供的 demo是一次性加载全部数据的。在项目中,数据比较多的情况下,一次性获取全部数据,是非常影响用户体验的。所以实现树状表格惰性加载数据。创建一个组件$ ng g c sluggishness-tree-tableYour global Angular CLI version (10.2.0) is greater than your localversion (7.3.9). The local Angular CLI version is used.原创 2020-10-28 10:52:21 · 1372 阅读 · 0 评论 -
Angular学习笔记84:将复制页面的上文字到剪切板
在项目中,偶尔会遇到将页面的文字复制到用户的剪切板中,方便用户操作,但是由于这种操作比较少,可能整个应用就一个地方或者两个地方,引入一个插件可能代价有点大。创建一个组件ng generate component copyToClipboardCREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.less (0 bytes)CREATE src/app/pages/copy-to-clipboard/copy-to-c.原创 2020-10-20 16:12:18 · 893 阅读 · 0 评论 -
Angular 学习笔记83:在表单中通过指令将输入框中输入的文本数据大写
有时候要求用户输入的字符自动转化为大写字符。在表单中通过指令将输入框中输入的文本数据大写模版文件<form [formGroup]="validateForm"> <nz-form-item> <nz-form-label nzSpan="4">转换大写</nz-form-label> <nz-form-control nzSpan="7"> <input nz-input formControlName原创 2020-08-12 17:23:51 · 402 阅读 · 0 评论 -
Jenkins镜像中安装nodejs和sonar-scanner
通过Jenkins进行sonar扫描前端项目,需要在Jenkins中安装,nodejs和sonar-scanner。拉取项目中使用的Jenkins镜像docker pull jenkins:2.164.3撰写DockerfileFROM 10.34.63.26:5000/jenkins:2.164.3RUN apk add nodejs \ && node -vADD sonar-scanner-4.4.0.2170-linux.tar /usr/local/share原创 2020-08-06 11:18:30 · 909 阅读 · 0 评论 -
Angular 学习笔记82:监听路由的变化
在项目中,有时会遇到这样一个问题:在应用中,需要根据当前的页面控制页面上某一个组件或者元素的显示与否,此时需要监听当前路由的变化,根据路由中是否包含了某一个关键字,从而判断当前元素或者组件的显示与否。路由变化的事件使用 Router的 events: Observable<Event>属性路由的事件如下:路由器事件说明NavigationStart本事件会在导航开始时触发RouteConfigLoadStart本事件会在 Router 惰性加载 某个路由原创 2020-06-10 19:13:02 · 5499 阅读 · 2 评论 -
将npm包发布在私有仓库(nexus)中
有时候需要将自己写的一些前端项目打包发布到公司内部的nexus仓库中。在nexus中新建一个 repository打开nexus,登录以后,按照下图操作选择 npm (hosted)填写 repository 相关信息这里的 Blob store最好选择为 npm 专属的如果没有需要在Blob Stores新建在Hosted选择:Allow redeploy...原创 2019-12-18 11:58:37 · 13582 阅读 · 0 评论 -
Angular学习笔记81:路由转场动画
在 Angular 中,可以使用路由在不同路由之间导航,在从一个路由导航到另外一个路由的时候,Angular 的 Router 会将URL映射到对应的组件,显示这个组件的视图,在路由转换之间添加动画,可以有效的提高用户体验。定义一个路由转场动画的大概思路需要一个路由模块,并定义了具体的路由在视图中有路由出口(router-outlet),从而使Angular 知道通过Router激活的组件...原创 2019-12-17 21:04:01 · 1822 阅读 · 0 评论 -
解决内网环境中node-sass不能下载从而导致构建失败的问题
在公司内网中,通过Jenkins自动化打包构建,由于只能在公司内网中进行操作,但是node-sass的包默认是从github上下载的,从而导致打包失败。如下图所示:解决步骤下载对应版本的node-sass包可以从GitHub上去下载对应版本的node-sass包https://github.com/sass/node-sass/releases/如果网速太慢可以在淘宝镜像中...原创 2019-12-13 17:04:08 · 2723 阅读 · 0 评论 -
Angular学习笔记80:Angular共享模块
有时候在项目中,会有一些组件需要经常用到,比如像下面这种二级标题这种二级标题可能会整个应用都会用到,所以需要将它作为一个共通的组件来使用。制作一个共享模块新建一个component目录新建一个component目录,在app目录下执行命令:mkdir component切换到component目录cd component创建二级标题组件执行命令:ng g c sec...原创 2019-11-19 22:19:53 · 618 阅读 · 0 评论 -
Angular学习笔记79:Angular 中的拦截器-HttpInterceptor
在项目中,前端需要在每次发送给后端的请求的header中统一添加 token 信息或者其他统一操作,这个时候就用到了拦截器。在 Angular 中,创建一个拦截器使用到了 @angular/common/http中的HttpInterceptor,实现的具体步骤如下:创建一个拦截器服务创建一个服务因为这按类别分,也是一个服务,所以使用Angular/CLI创建时,执行命令:ng g s ...原创 2019-11-14 11:55:04 · 2022 阅读 · 0 评论 -
Angular学习笔记78:使用栈来处理字符串是否是回文问题
使用"栈"判断一个字符串是否是回文。回文是指正序(从左向右)和倒序(从右向左)读都是一样的。大概思路:将字符串的每一个字符进栈,然后在出栈,这个时候出栈以后的字符串顺序刚好和原字符串顺序相反,当出栈后的字符串和原字符串相等,那么这个字符串为回文。根据思路写方法// 测试字符串时候是回文public testIsPalindrome(str: string): boolean { c...原创 2019-11-13 16:48:42 · 139 阅读 · 0 评论 -
Angular学习笔记77:在Angular项目中实现数据结构-栈
栈是一种特殊的列表,只能通过栈顶去访问栈内的元素,具有先进后出的特性。创建一个 “栈” 服务执行命令:dataStore git:(master) ✗ ng g s stackCREATE src/app/dataStore/stack.service.spec.ts (328 bytes)CREATE src/app/dataStore/stack.service.ts (134 by...原创 2019-11-13 15:54:04 · 288 阅读 · 0 评论 -
Angular学习笔记76:使用 Puppeteer 自带的 Chromium进行Jenkins 持续构建测试
在 Jenkins + SonarQube 中,使用 ng test --code-coverage --watch=false只是来获取覆盖率,关于 Bugs 、Code Smells、Duplications 可以使用 Sonar-Scanner 来获取,所以使用 puppeteer 自带的 Chromium 从而获取覆盖率安装 Puppeteer执行命令:npm i puppeteer...原创 2019-11-11 15:22:38 · 756 阅读 · 0 评论 -
Angular学习笔记75:惰性加载路由
在项目中,部分页面或者某一个菜单下的模块不经常被访问,所以可以将其设置为在用户访问这个页面或者点击此菜单的时候,再进行加载。在 PagesModule 中有一个名为 lazyLoad 的模块,模块中有一个组件为 lazyLoadCom 的组件,现在将这个 lazyLoad 的模块及 lazyLoadCom 改成惰性加载。创建 lazyLoad 模块执行命令ng g m lazyLoad -...原创 2019-11-08 16:37:04 · 588 阅读 · 0 评论 -
提高前端项目在内网环境中依赖拉取依赖的速度
前端构建中提高项目拉取依赖的速度1. 将 npm 的缓存目录挂在到宿主机的某个目录中在构建前端项目的时候,将 node 镜像中的 npm 缓存目录挂载到宿主机的某个目录拉起nodejs 镜像的时候过载-v /Users/wjy/Desktop/build/frontcache:/root/.npm2. 将每一个项目的 node_modules 挂载到宿主机中-v /WebstormP...原创 2019-10-25 14:21:00 · 931 阅读 · 0 评论 -
Angular学习笔记74:使用 Phantomjs 模拟浏览器进行Jenkins 持续构建测试
在 Jenkins + SonarQube 中,使用 ng test --code-coverage --watch=false只是来获取覆盖率,关于 Bugs 、Code Smells、Duplications 可以使用 Sonar-Scanner 来获取,所以使用 Phantomjs 模拟浏览器从而获取覆盖率。安装PhantomJS1. 下载PhantomJS下载PhantomJS Wi...原创 2019-10-22 16:11:53 · 274 阅读 · 0 评论 -
Angular学习笔记73:解决lcov.info中文件路径不对从而导致没有覆盖率的问题
解决没有覆盖率的问题在sonar-scanner 中的覆盖率可以通过属性来指定 typescript 覆盖率的文件目录sonar.typescript.lcov.reportPaths在Angular项目中,可以通过:ng test --code-coverage --watch=false来生成 lcov.info 文件,sonar 通过读取这个文件来获取当前项目的覆盖率在之前由...原创 2019-10-22 15:19:31 · 1176 阅读 · 0 评论 -
Angular学习笔记72:解决报错:java.io.IOException: Cannot run program "node": error=2, No such file or director
解决报错由于找不到node而没有扫描结果的问题。在构建的日志中,会有如下报错:java.io.IOException: Cannot run program “node”: error=2, No such file or directory由于这个Jenkins的镜像是基于 alpine 版本制作的,没有node的环境,所以会报错。在sonarqube官方文档中关于typescript、...原创 2019-10-21 14:54:29 · 11034 阅读 · 1 评论 -
Angular学习笔记71:使用Jenkins + SonarQube 扫描Angular项目
使用Jenkins+SonarQube扫描Angular项目准备环境安装Docker & docker-compose安装docker参见文章:在云服务器上安装docker安装docker-compose参见文章:docker-compose的安装和设定在这里不详细描述Jenkins使用 docker 拉去 Jenkins 的镜像:docker pull...原创 2019-10-21 14:37:42 · 1185 阅读 · 0 评论 -
Angular学习笔记70:Angular项目的单元测试 -- 对组件进行测试
对组件进行测试对组件绑定的测试例如在一个组件中,一个组件中模版里有一个标题的是<h2 class='title'>{{title}}</h2>组件的类文件中对应绑定了一个类文件中的属性,测试这个绑定的数据it('should render title in a h2 tag ', () => { const fixtureEle = Tes...原创 2019-10-14 16:24:48 · 1232 阅读 · 0 评论 -
Angular学习笔记63:手动把项目的 CSS 预编译器改成 Less
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展.在创建项目的时候指定预编译器在Angular/cli 7.3.8 版本创建一个项目时,Angular/cli 工具提供了多个预编译器来选,这个时候就可以指定为Less就可以了wujiayudeMBP:~ wjy$ ng version _ ...原创 2019-09-30 16:04:36 · 748 阅读 · 0 评论 -
Angular学习笔记49:响应式表单验证(同步)
在创建完表单以后,还需要验证对于表单中的控件,例如验证用户输入的数据是否符合要求?用户对一些控件是否已经填值?通过对表单的验证,确保用户输入的数据的准确性,增强用户体验。在Angular中,内置了一些基本的内置验证器,对于表单可以分为响应式表单和模板驱动表单。在这里分别做介绍。响应式表单同步的验证创建一个组件,构造一个响应式的表单(validateForm).创建组件:reactive...原创 2019-06-20 10:08:14 · 1087 阅读 · 5 评论 -
Angular学习笔记46:响应式表单-使用FormBuild快速构建表单
继Angular学习笔记45:响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值,可以使用angular创建一个 Array 一样的表单。但是,每次创建一个Form实例的时候,都需要 new FormControl()、new FormGroup() 等非常的麻烦。这个时候,就可以使用FormBuilder服务来快速的生...原创 2019-06-15 15:05:18 · 1092 阅读 · 2 评论 -
Angular学习笔记45:响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值
继Angular学习笔记44:响应式表单-获取两层FormGroup嵌套值得变化和两层FormGroup赋值,可以在FormGroup中嵌套FormGroup了。但是在项目中,会经常遇到类似于Array一样的表单。比如:在UserInfoComponent中,增加一个电话号码属性,需要注意的是,电话号码这个属性,有可能是多个,所以这里要用到的是FormArray。在FormGroup中增加ph...原创 2019-06-14 14:41:06 · 6896 阅读 · 3 评论 -
Angular学习笔记44:响应式表单-获取两层FormGroup嵌套值得变化和两层FormGroup赋值
继Angular学习笔记43:响应式表单:FormGroup嵌套以后。获取FormGroup中值得变化在 FormGroup 中,有时需要捕获这个控件的值得变化,捕获name的输入值得变化在构造方法中,订阅validateForm中name这个实例值得变化。并将其输入。constructor() { this.validateForm.get('name').valueCha...原创 2019-06-06 18:34:39 · 2789 阅读 · 1 评论 -
Angular学习笔记43:响应式表单:FormGroup嵌套
继Angular学习笔记42:响应式表单:表单分组FormGroup-新建、获取FormGroup的值以后。在UserInfo中还有属性是 Address,不过这个 Address属性 是由三个控件组成,分别是:area:地区;street:街道;houseId:门牌号。这个时候,就涉及到了FormGroup嵌套。将area:地区;street:街道;houseId:门牌号这三个进行分组,它...原创 2019-06-06 16:39:33 · 1839 阅读 · 0 评论 -
Angular学习笔记42:响应式表单:表单分组FormGroup-新建、获取FormGroup的值
继Angular学习笔记40以后。在user-info这个组件中,有三个formControl,但是会发现在这个组件中,三个控件分别绑定了三个组件的属性值。能否在一个属性中,将这三个formControl分组管理起来呢?新建一个FormGroup在Angular 中,可以使用FormGroup;通过 FormGroup 将这三个控件管理起来,并且通过FormGroup就可以将之前的三个属性变...原创 2019-06-06 14:31:23 · 12534 阅读 · 5 评论 -
Angular学习笔记41:在Angular使用pdfmake,解决中文字体乱码和报错问题
在前端学习笔记:angular4中将html导出为pdf中,使用了pdfmake的源代码克隆或下载到本地之后,使用gulp解决乱码问题,但是在升级Angular6之后,发现生成的vfs_fonts.js却不能用了。经pdfmake官网,决定使用shell 脚本来创建自定义的中文字体包。将官网的脚本拷贝到本地,保存文件非mac的版本#!/bin/shif [ -t 1 ]; then...原创 2019-06-05 23:20:02 · 1583 阅读 · 0 评论 -
Angular学习笔记40:响应式表单:一个简单的表单并修改表单的值
响应式表单在前端开发中,经常要将页面上用户填写的数据传输给后端,这些表单的数据怎样收集呢?在这里,推荐使用Angular中的响应式表单。1. 使用响应式表单的前期准响应式表单是属于模块:ReactiveFormsModule,所以在组件中使用响应式表单就要在模块中,先引入这个ReactiveFormsModule模块。修改App.module文件;import {BrowserModul...原创 2019-06-02 14:26:34 · 3122 阅读 · 9 评论 -
Angular学习笔记39:Demo-写一个单元格可编辑的table
写一个单元格可编辑的table的Demo需求分析现在需要做一个table,其中的单元格式可以编辑的,当用户点击单元格的input的时候,就可以编辑了,然后点击input之外的地方,就将这个input置为disabled。从而不可编辑。先新建一个组件wujiayudeMacBook-Pro:demo-test wjy$ ng g c editTableCREATE src/app/edit...原创 2019-05-31 16:56:43 · 2002 阅读 · 0 评论 -
Angular学习笔记38:解决Angular启动项目时,端口被占用问题Port 4200 is already in use
解决Angular启动项目时,端口被占用问题在启动Angular项目时,Angular默认的端口是:4200,但是有时会因为端口占用,启动失败。提示:Port 4200 is already in use. Use ‘–port’ to specify a different port.解决方法一:kill端口占用的服务:找到占用4200端口的服务,将进程kill掉就可以了。win系统:...原创 2019-05-07 20:48:47 · 2355 阅读 · 0 评论 -
Angular学习笔记37:Angular动画(5):关键帧动画
关键帧动画在Angular学习笔记32:Angular动画(1):一些基础中,写了一个简单的转场动画,将这个动画修改为具有多个顺序执行步骤的动画,此时就要用到关键帧动画。在Angular中,使用 keyframe() 函数就可以创建关键帧动画,这类似的CSS中的关键帧。关键帧允许在单个时间段内进行多种样式更改。例如,将上面文章中的动画,黄色变化到绿色的时候,多次改变颜色。修改类文件如下:...原创 2019-05-07 20:28:11 · 497 阅读 · 0 评论 -
Angular学习笔记36:Angular动画(4):在动画中增加回调事件函数
在动画中增加回调事件函数在动画启动和终止的时候,trigger()函数会有一些回调函数,在模版文件中,动画事件都是可以通过$event来传递。比如在模版中有一个trigger()为open,此时,常用的回调就可以使用:@open.start 和 @open.done。拿之前的飞入飞出动画来实验:在模版文件中,增加一个start的回调:<nz-form-control nzSpan=...原创 2019-05-07 19:15:29 · 459 阅读 · 0 评论 -
Angular学习笔记34:Angular动画(2):动画转场1:通配符(*)与void状态
动画转场:通配符与void预定义状态与通配符匹配在 Angular 中,转场状态可以通过 state ()函数进行显式定义,或使用预定义的*(通配符)状态和void状态。在Angular中,转场的动画,可以通过state() 函数进行显示定义,也可以通过Angular预定的 *(通配符) 状态 和void状态。通配符“*” 通配符:可以匹配任何一个动画的状态。当不在乎某个HTML元素的起...原创 2019-04-01 15:52:03 · 552 阅读 · 0 评论