灿灿大王搭建的黄金屋

前几天前端项目使用Jenkins打包总是会报内存溢出的错误（FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory），试了很多解决方法都没办法正常打包，只能自己在本地手动打包，生成镜像后更新前端环境了，具体操作如下：1️⃣在自己本地的项目中使用npm run build，将本地代码打包成dist文件；...

npm install XXXX:会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时，不会自动安装Xnpm install XXXX –save: 会把X包安装到node_modules目录中 会在package.json的dependencies属性下添加X 之后运行npm install...

系统中路由想要被访问，需要先通过路由守卫验证，看当前用户是否登录：AuthGuardProvider路由守卫服务：/* * @Author: Wangcan * @Date: 2018-05-16 13:34:23 * @Last Modified by: Wangcan * @Last Modified time: 2019-08-17 15:46:20 * @Descrip...

装饰器/注解就是一个函数，但它是一个返回函数的函数，它属于Typescript的特性，而非Angular的特性。类装饰器（https://www.jianshu.com/p/57ed7747c45d）：@NgModule、@Component、@Injectable、@Pipe、@Directive在使用Angular进行开发的时候，我们很多时候都是在设计Component、Modul...

设计上看，组件（带有@Component装饰器的类）强调重复调用，就像零件一样，一颗螺丝、螺丝帽分别是一个零件——组件化就好比：做一个网站，可以把一个个区域拆成多个组件，比如导航栏是一个组件、编辑区是一个组件、页脚是一个组件，可以尽情拆分，一个组件包含了html、css和js代码，可以简单理解为页面的一块，可以根据需要把它放在页面的任何部位，也可以和其他组件组成新的组件。每个组件对应一个工程目录，...

男神觉得时机成熟了，手捧99朵披着月季的玫瑰向女神求婚：“小妞妞，嫁给我吧！我发誓，我会对你一辈子好的！”“这个嘛，你先去问问我爸爸，我大伯以及我大姑的意思，他们全部都认可你，我再考虑考虑！对了，如果我爸没有答复，大伯他们肯定是不会同意的；如果大伯没有答复，大姑也是不会同意的。”在传统的JS中，类似这种多嵌套，多异步，多发展的，我们需要牺牲（对于程序来讲）微不足道的时间换取代码的...

想要实现一个table中，根据数据不同而用不同颜色展示，比如：审批表经过不同次数编辑保存后，审批表列表页对应行的字体颜色变化。如第一次保存默认为黑色，第二次保存为绿色，第三次保存为红色......（暂设置5层，5层后颜色不再变化）首先要声明，由于我的table是封装起来的一个公共组件，也就是说我不得不将表格内容通过@Input()从我的使用的页面传到公共组件中，首先我们只有审批表这个列表需...

今天拉取分支上代码的时候出现了一个问题，git pull失败，提示：fatal:refusing to merge unrelated histories这个问题是因为两个不相干的git库，一个本地库，一个远端库，本地要推送到远端，远端觉得这个库和自己不相干，所以告知无法合并。接下来我们有两种方法解决这个问题：第一个方法也是我使用的方法：强制的方法： git pull ori...

14、介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景？答案：观察者模式中主体和观察者是互相感知的，发布-订阅模式是借助第三方来实现调度的，发布者和订阅者之间互不感知：观察者模式就好像 个体奶农和个人的关系。奶农负责统计有多少人订了产品，所以个人都会有一个相同拿牛奶的方法。奶农有新奶了就负责调用这个方法； 发布-订阅模式就好像报社， 邮局和个人的关系，报纸的订阅和分发是由邮局来...

下面展示如何在列表中展示一个树状结构，能新增节点、编辑节点、新增下级：首先列表上方是新增按钮，点击后调用新增方法：<div class="table-header"> <button nz-button nzType="info" (click)="addOrEditDept(1)">新增</button></div>新增一级...

angular中的日期管道：{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}其中value为日期表达式，是一个Date对象、数字（从 UTC 时代以来的毫秒数）或一个 ISO 字符串 ；format是一个要包含的日期、时间部分的格式，使用预定义选项或自定义格式字符串——format包括：s...

在模块Module的路由配置模块（routing.module.ts）中进行页面的子路由配置：/*** 子路由配置*/const childRoutes: Routes = [ { path: '', redirectTo: 'list', pathMatch: 'full' }, // 默认路由 { path: 'list', component: Comm...

正则表达式:e.g:(?0\d{2}[) -]?\d{8}首先是一个转义字符(,它能出现0次或1次(?),然后是一个0，后面跟着2个数字(\d{2})，然后是)或-或空格中的一个，它出现1次或不出现(?)，最后是8个数字(\d{8})。ps:?表示出现1次或者不出现。1：匹配身份证号正则表达式：(^\d{15}$)|(^\d{17}([0-9]|X)$)2：匹...

一般来说，表格数据遍历时使用*ngFor我们就可以取到索引值：<nz-table nzSize="small" #nzTable [nzData]="DataList" [nzBordered]="true" [nzTotal]="total"> <thead> <tr> <th>审批层级</...

今天做的项目中做了一个新增页面，其中最顶级是一个formGroup表单命名为editClauseForm，里面有几个单独的字段，还有一个嵌套的formArray，命名为clauseArr，这个clauseArr中存放一个用户自己可填写的table。其中有一个“默认人员”字段是弹窗中选择人员之后把名称带出来填到这个字段中：关闭弹窗后用户名称name已经拿到了，但是我发现在ts上不知道怎么绑定...

1.用xshell连接服务器2.放置压缩文件：用winscp或者xftp将本地下载好的jdk 压缩包、nodejs压缩包和NGINX压缩包放到服务器的/usr/local下。或者用wget命令直接下载三个文件。 下载jdk：通过如下方式，绕过用户同意认证，直接下载jdk安装文件，下载命令如下： wget --no-check-certificate --no-cookie...

在页面上想在上方展示菜单栏,一级菜单点击后加粗高亮显示，鼠标浮动在菜单上展开二三级菜单，二级菜单加粗，三级菜单展开显示在对应的上级菜单右侧,效果如下图所示：在页面上显示标题logo,菜单，右侧展示当前用户收到的新消息和登录信息，nav-header.component.html代码如下(仅作参考)：<div class="top-menu-bar"> <div ...

一、新增(add)修改(update)页面上的文件上传：用户在系统的新增页面上，上传了一些附件：在页面中我们需要使用上传控件的一些方法，保证附件能够顺利上传并存储，还需要控制上传完成的附件可以进行删除操作： <div nz-col [nzSpan]="16"> <nz-form-item nzFlex> ...

1、Angular项目创建：ng new ProjectName使用cd指令进入到项目创建所在的文件夹中，运行以下指令安装项目运行的依赖，这时会出现node_modules文件夹和package.json文件：npm install如果Node.js的版本在8以上，则使用如下指令安装angular.cil：npm install - g @angular/cil...

首先在Angular6项目中安装富文本编辑器的依赖：1、angular >= 5时ngx-quill的安装：npm install ngx-quill2、angular < 5时：npm install ngx-quill@1.6.0然后在使用到富文本编辑器的模块中，引入ngx-quill的QuillModule：例如：在message-management.m...

想要让用户(系统管理员)可以在页面上动态维护数据字典,而不是前端程序员将下拉选项等写死在页面上,那么就需要用到管道,通过标识符唯一定位到相应的字段上的下拉选项等中的内容。第一步，首先在系统的“数据字典”页面配置数据字典的名称、代码编号、便签和键值等信息：记住代码编号，这里以PUR_TYPE为例，这是要在 sys-status.pipe.ts中进行配置的唯一标识符：import {...

首先，可以参考一下ant-design官方文档中对于横向滚动条的用法（这里参考1.8.1版本的固定列方法）：import { Component } from '@angular/core';@Component({ selector: 'nz-demo-table-fixed-columns', template: ` <nz-table #nzTable [nz...

想做一个功能，就是在一个页面上有一个空的用户列表（表中存放已经被选中的用户），点击列表上方的“新增”按钮，弹出一个子列表，子列表中显示所有有权限的用户，在子列表中选择某些用户，点击弹窗下方的“确定”按钮，将这些选中的用户信息暂时存放到空的用户列表中，并可以点击某条数据后面的“删除”按钮，将暂存的用户信息删除，大概像下面这样：晕了吗？？？我们分解一下，一步一步来首先我们先使...

一个可编辑的表单分为两个tab标签页，想要实现第一个tab页上的某个选项选定后，将这个选项选定的内容传到另一个tab页上，可以使用框架提供的服务StorageProvider：在第一个tab页上引入StorageProvider，StorageProvider代码如下：/* * @Date: 2017-09-27 17:57:38 * @Last Modified time: 201...

想要在调用上传接口之前，使用正则表达式判断上传文件的名称的格式是否是我们所规定的格式（string_string_string.string）例如：PRINT_A4_xlz0001.pdf这样的格式上一篇笔记中我们已经提到了怎么使用上传upload的控件，那么现在我们需要在beforeFileUpload方法中，使用正则表达式去匹配文件名： <div nz-col [nzSpa...

想要实现一个预览文件的功能：点击某条图纸记录后面的“查看图纸”按钮，调用预览图纸的方法，将图纸的id传给后端，后端返回图纸的链接存在返回数据的data字段中：首先我们在点击“查看图纸”的按钮上绑定调用后端接口的方法doView(data)：/** * 查看图纸 */ doView(data) { const params = { id: dat...

最近做的系统中，有消息管理的功能，点击某条记录查看消息详情，可以展示消息发出人、发送时间、上传的附件等，都是很常规的功能，页面写的差不多时项目经理又提出一个要求：因为发消息有多个收件人，能不能显示两个按钮，点击后弹出弹窗，分别展示已经读了消息的收件人和未读消息的收件人？what could I say??!!!You happy is ok果真搬运代码的速度跟不上项目经理的脑洞。已读和未读...

@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等，而@HostListener()可以监听宿主元素上的事件。举例：实现一个在输入时实时改变字体和边框颜色import { Directive, HostBinding, HostListener } from '@angular/core...

1.组件中定义两个变量，分别用于控制按钮是否可以点击（countDown）和按钮上的倒计时数字（countDownTime）：countDown = false;countDowmTime = 60; // 这里设置倒计时为60SshowButtonText = '发送短信验证码'； // 可以控制动态改变的按钮提示信息2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按...

要求：忘记密码页面，输入手机号后才能点击“获取短信验证码”按钮，输入验证码后才能点击“下一页”按钮。方法：1.定义两个全局变量用于动态判断是否输入了手机号和短信验证码：2.初始化表单中动态验证是否填写了要求的两个字段，实时改变两个全局变量的值（boolean）：3.页面上将两个用于判断状态的全局变量绑定到按钮的disabled属性上：这样就可以实时的取到用户的输入，进行...

1.在主页的json文件中（menu.json）给左侧目录树中的各个节点添加一个isShow属性：{"code": "200","msg": "Success","_commment": "菜单接口","datas": [{"id": "1","menuCode": "10","menuName": "首页", ------一级节点"menu...

三个商品属性组，每个属性组中有若干属性值，在下拉控件中选中属性组后，在右侧复选控件中选择一个或多个属性值，再根据笛卡儿积组合生成商品sku列表（如下图）：服务（provider）中：/*** 如果传入的参数只有一个数组，求笛卡尔积结果* @param arr1 一维数组* @returns {Array}*/descartes1(arr1) {// 返回结果，...

Angular6嵌套表单的验证嵌套表单ngOnInit()中的表单验证初始化表单的方法表单验证的方法保存方法中怎么取到每个字段页面中表单的写法效果嵌套表单ngOnInit()中的表单验证以下文代码为例，表单validateForm中包含三个子表单，每个表单中有一定的字段值，初始化表单验证：ngOnInit() {this.validateForm = this.fb.group({bi...

Angular起步——环境搭建Angular的开发环境搭建Nodejs安装安装Angular Cil开发工具Visual Studio Code的安装创建Angular项目Angular的开发环境搭建Nodejs安装我们使用的Angular6前端开发框架需要安装Node.js的8.x或10.x版本。可以在下面的网站下载安装包：https://nodejs.org/en/download/...

一、提供商注册到模块中还是组件中？1.通常，优先把模块中具体特性的提供商注册到模块中（@NgModule.providers），而不是组件中（@Component.providers）。应该把全应用级提供商添加到根模块AppModule中，而不是还是根组件AppComponent中这是因为惰性加载模块及其组件可以注入AppModule中的服务，却不能注入AppComponent中的。...

一、当一个服务中需要别的服务时怎么做？当服务需要依赖时，我们也可以用构造函数注入模式来添加一个带有别的依赖的构造函数。例如在HeroService服务中需要Logger的服务：import { Injectable } from '@angular/core';import { HEROES } from './mock-heroes';import { Logger ...

1、调用接口的时候怎么带着查询条件？例如：调用接口查询数据，并带有条件，只查询状态码为"2"的数据：可以将查询条件放在调用接口的方法的传入参数searchCondition中：调用接口查询的方法：/** * 查询列表(分页) * @param pageIndex * @param pageSize * @param sortKey * @param ...

1.app.config.ts中进行系统参数配置：export class AppConfig { // 系统配置 app = { title: '朗朗供应商', // 系统名称 systemName: 'xcloud', // 标识系统分类，根据不同系统进行配置 code: 'zs', ver: '1.0' }; // 参数配置 ...

1.产品目录结构树：(1).category-provider.ts:调接口取出目录树结构数据： /** * 使用后端拼装好的tree结构数据 */ public getCategoryTreeData(): Observable&lt;any&gt; { return new Observable(observable$ =&gt; { this.h...

1.你必须在一个NgModule类声明每一个组件。 否则当你使用这些组件时就会在浏览器的控制台中看到一个明显的错误信息。组件、指令和管道 — 属于declarations数组。 不要将其他类型的类添加到declarations中，例如NgModule类, 服务类，模型类。2.通过引导根AppModule来启动应用。 在启动过程中，其中一步是创建列在bootstrap数组的组件， 并将它...