修炼中的小精灵-CSDN博客

原创 VUE原理深度解析/Vue Router实现原理过程

这里写自定义目录标题嵌套路由编程式导航History 模式Hash模式Hash和history的区别history的使用history需要后台支持解说nginx文件夹Vue Router实现原理过程{ path:'/detail/:id', name:'Detail', // 非动态路由 //compontent:'details', // 开启prop传参功能 props:true, //实现懒加载用户点击才进行加载 compontent

2020-09-03 10:11:43 287

原创 html5 video全屏播放/自动播放

页面代码<header class="header" style="width:100%;position: relative;"> <?php if(!Helper::isMobile()) { ?> <video id="homeVideo" class="home-video" autoplay loop muted poster="res...

2020-02-14 16:23:10 611

原创 Angular 如何开发自定义指令

Angular 如何开发自定义指令今天在工作中遇到了需要拖拽的功能，在网上查了一下说需要自己开发指令然后就自定义了一个appDrag的属性指令(我的需求是可以自由拖拽图片到任意地点)步骤:在自己想要的文件夹下创建 ng g directive drag 指令中需要引入ElementRef, HostListener import{Directive,ElementRef,...

2019-11-20 18:46:23 200

原创 angular 浏览器id的获取和设置

1、{ path: 'detail/:id', component: HeroDetailComponent },<a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">import { ActivatedRoute } from '@angular/router';...

2019-11-12 20:41:26 488

原创描点链接滚动置顶

//描点链接滚动置顶$("a[href*=#]").click(function(){console.log(location.pathname,'location.pathname',$(this.hash))if(location.pathname.replace(/^\//,"")==...

2019-11-09 22:16:37 268

转载 js解决同步获取异步方法返回值问题

今天研究一个小问题：怎么拿到JavaScript异步函数的返回值？https://www.jb51.net/article/100661.htm1.错误尝试当年未入行时，我的最初尝试： <script> function getSomething() { var r = 0; setTimeout(function() { r ...

2019-11-07 23:24:32 2223

原创 cscode使用命令行模式 ng报错

1、使用命令行TERMINAL模式的时候 ng和一些命令报错解决方法1]、打开我的电脑 c盘选择用户-administrator-(再查看中将隐藏的项目勾选上)-找到AppData-Roaming-npm的路径复制2]、将复制的路径我的电脑-属性-高级系统设置-环境变量-添加到系统变量中的path中3]、还是会报错然后在网页上查找执行一段代码然后选择A...

2019-10-30 10:13:41 434

原创如何实现在指定的元素出现的时候可以按键盘事件消失则不可以按

备注:我在工作中遇在一个文字出现是可以按键盘事件的但只允许按键一次并记录结果，这个时候再次字体消失，然后直到字体再出现的时候就在开启键盘事件出现字体开启this.showResultContTimer=setTimeout(()=>{this.keyUpResult();this.isShowPlus=false;...

2019-09-18 09:26:27 128

原创 angular如何实现音频展示和方法属性的使用

注释:在公司用angular 自己尝试很多方法使用audio 的音频在html中能够写属性并且正常播放，但是在ts中调用不到方法和属性。解决办法：ts文件中audio = new Audio("../../../../assets/audios/clock.mp3");this.audio.play();只需这样就可以！...

2019-09-06 18:09:00 1525

原创 angular+NG-ZORRO如何实现table点击获得选中得行id

添加html<div class="my-md"><nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message"><ng-...

2019-08-28 11:08:30 3291

原创 Angular中如何引用自己写的jq文件

前言:公司想用一套代码分别解决cs端和bs端的问卷调查，功能大体相同，所以在约束了字段之后，我们决定用最原始的html和jq来完成这单独的部分功能，bs端用的框架是angular这就需要解决一个问题如何将你自己写的jq的js代码引入angular中并在angualr项目中直接使用。普通情况我们可以直接用require(‘../../../js/文件名’)但是这种情况只能加载一次，并且有时候...

2019-07-29 10:27:26 251

原创 Git

1、创建分支在原有基础分支上创建分支2、点击克隆复制链接地址直接在git上面clonegit clone 克隆地址3、查看仓库的分支git branch -a4、创建本地分支切换自己的分支git checkout -b v1 origin/v15、这样就可以直接访问了相关bug解决1)、在远程仓库创建了项目，但是git中查看分支并未显示可...

2019-07-16 18:08:17 74

原创 JSONP的优缺点

JSONP的优缺点 1.优点 1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略； 1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持 1.3在请求完毕后可以通过调用...

2019-06-27 18:33:53 183

原创 VUE笔记(1)

Vue.jsXSS CSRF1、什么是Vuejs?渐进式javaScript的框架特点：易用：学习曲线相对低且平滑(react需要掌握什么事函数式编程，angular需要掌握什么事依赖注入，什么事内部模块)灵活:可在一个库到一套生态中伸缩(小到只用部分组件来写，或者只应用到视图，大到可以用vue全家桶来构建整个系统)高效:运行快，体积相对小(根据虚拟dom来执行，打包体...

2019-06-25 22:37:23 120

原创面试题总结

1如何解决跨域问题自答：1)Jsonp2)Header百度：①、response 添加 header②、JSONP 方式③、HttpClient 请求转发④、nginx 转发2、bfc规范是什么bfc不晓得是什么百度: BFC 的概念1.规范解释:块格式化上下文（Block Formatting Context，BFC）是W...

2019-06-25 17:51:00 118

原创日期相关

格式化日期：后台获得得数据："PublishedUtc": "2019-04-29T11:18:17.9555175Z", 元数据是这样得// 格式化日期 formatterDate(date,subPosition, subLength){ let temDate = new Date(date).toLocaleDateString().split("...

2019-06-03 15:03:18 89

原创 angular 自学笔记

angular 自学笔记1、安装node.js node –version查看版本2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量3、安装angular Clinpm install –g @angular/clicnpm i –g angular-cli安装成功后可进行查看 n...

2019-05-30 22:52:36 168

原创 angular 自学笔记

angular 自学笔记1、安装node.js node –version查看版本2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量3、安装angular Clinpm install –g @angular/clicnpm i –g angular-cli安装成功后可进行查看 n...

2019-05-30 22:41:20 233

原创 angular中的相关缓存内容

1、如何设置并且获取缓存中的数据<button nz-button nzType="primary" (click)="startTest()">开始测试</button>2、html页面进行设置并且获取 //开始测试 startTest() { this.publishScheme.getPublishSchemeById('fcaca26e-16...

2019-05-20 11:46:53 171

原创 angular+NG-ZORRO如何验证

angular+NG-ZORRO如何验证普通验证(required,emil,minlength,maxlength)<nz-form-item><nz-form-label [nzSm]="8" [nzXs]="12" nzRequirednzFor="intervalTime" >屏变化间隔时间</nz-form-label><n...

2019-05-16 16:30:52 2322

原创相关验证

简单验证手机号function isPoneAvailable(str) {var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;if (!myreg.test(str)) {return false;alert("请填写正确的手机号码")...

2019-05-16 16:23:10 140

原创 angular 如何实现radio的功能

<nz-form-label [nzSm]="0" [nzXs]="10" >性别</nz-form-label>&l...

2019-05-16 15:09:07 2148

原创 Angular如何子向父传值

Angular如何子向父传值父亲：Ts:hreo :Hreo(接口)getHeroName(hero){ this.hreo = hreo;}<p *ngFor=”let hero of heroes” (click)=” getHeroName(hero)”></p><app-details [hero]=”hero”&...

2019-05-14 23:24:06 1051

原创 angular同时启动两个项目端口号冲突解决

angular同时启动两个项目端口号冲突解决用angular的时候要新创建一个项目，原来项目不想关闭，还需要在启动一个新的项目，然后新创建项目的时候就出现端口被占用的情况，于是只能修改新项目的端口号angular6和以往版本不同，没有angular-cli，很多结构都发生变化了。。路径\node_modules\@angular\cli\lib\config\schema.json...

2019-05-09 13:54:10 943

原创 angular 创建服务请求数据

ng g s services/user在app.module.ts中引入服务import {UserService} from "./services/user.service";providers: [UserService],使用servies需要引入服务在users.service.tsimport { Http } from '@angular/http' ;在...

2019-05-08 22:33:12 139

原创 angular如何安装jquery

angular如何安装jquery准备npm（相信 Angular 项目中，本机肯定有 npm）良好的网络（之所以把网络写到这里，是因为由于npm仓库在国外的原因，有时候因为网络问题会导致安装失败，这时可以将仓库换为淘宝的仓库，具体方法可把npm直接换成cnpm即可）安装jQuery使用以下命令进行安装：# 进入到项目目录# 安装 jQuery 依赖npm ...

2019-05-08 16:18:13 975

原创在angular中如何操作当前点击的元素

前言：在做功能的时候想通过点击当前的按钮，控制当前的元素样式，我是通过原生的js来控制的想做的想过很简单点击元素的时候让自己的背景变颜色，其他背景都恢复白色html：<div class="add-trclass" id="itemList"><p *ngFor="let item of optionList; let idx = index" (click)...

2019-05-08 15:21:06 1232

原创 angular如何实现创建功能和修改功能在同一个组件中

angular如何实现创建功能和修改功能在同一个组件中刚刚接触angular，创建功能和修改功能可以公用一个组件。记录如下html:<formnz-form#validateForm="ngForm"(ngSubmit)="submitForm()"nzLayout="horizontal"autocomplete="off"><!-- 模态框头部...

2019-05-08 14:05:39 387

原创在使用angular的表单循环多选框name相同出现报错如何解决

使用[(ngModel)]，说明是一个表单元素，如果简单的放在form中，可能会报错，必须要有name 属性，在表单中才有意义；或者使用[ngModelOptions]="{standalone: true}属性,从form中独立出来，提交的时候不包含该标签。在form外使用无所谓有没有name属性。<div *ngIf="current == 2"><div st...

2019-05-07 18:25:50 565

原创 angular+NG-ZORRO如何实现树的操作(展示、选中传输给后台)

前言：今天做一个树形结构的展示，从后台取来数据进行展示，再从前台选取传给后台的一个操作。应用的技术是angular、NG-ZORRO效果如下图：(两个量表类型) 后台需要提供的字段有tenantId、normalFormIds、scaleIds分别是当前选中的表格中的id、范式的选中id不包括类型也就是一级标题、量表选中的id同理不包括一级类型的idhtml页面...

2019-05-07 18:16:10 3768 1

原创 jsonplaceholder如何搭建本地服务

如何搭建本地服务利用jsonplaceholder.typicode.com在github上面搜索 json-server 第一个就是 https://github.com/typicode/json-server(1)、npm install -g json-server(2)、在做面上创建一个JSONSERVER的文件夹(3)、在新建文件夹下打开git bash 将文件npm ...

2019-05-06 21:26:55 339

原创在angular+NG_ZORRO项目中如何引用别人建好的组件菜单

原因：在项目中同事创建好了一个菜单的组件发给了我，我需要添加并且展示。步骤如下# 前端配置# service-proxy.module 配置1. 首先在前端项目的根目录中的打开 `nswag-> refresh.bat` 批处理文件更新 service-proxies.ts 文件内容2. 再到文件夹路径为`\src\shared\service-proxies\serv...

2019-05-05 17:57:04 993

原创 angular关于select的内容

1、ng如何绑定到selct框，如何获得option的内容发生改变的时候绑定事件<nz-select name="optionCount" #optionCount="ngModel"[(ngModel)]="selectedOption.optionCount" nzAllowClear[nzPlaceHolder]="l('OptionCount')" style="widt...

2019-04-28 15:41:11 301

原创 angular如何引用并且使用路由以及如何获得相关参数

1、app.module.ts中引入路由 (注意引入两个组件之间必须要有空格，否则会报错)import { RouterModule, Routes } from "@angular/router";//设置路由const appRoutes:Routes = [ {path:"",component:HomeComponent}, {path:"login",compon...

2019-04-27 23:06:55 460

原创 Angular如何安装bootstrap 和tether

cnpm/npm install bootstrap@4.0.0-alpha.6 tether jquery –save package.json 中可进行查看安装是否成功和版本号在angular.json中进行配置在(找到路径地址：node_modules/_bootstrap@4.0.0-alpha.6@bootstrap/dist/css)拷贝bootstra.css的路径地址...

2019-04-27 23:06:23 362

原创在angular中安装富文本编辑器

1、cnpm install ngx-quill 2、cnpm install quill3、index.html中引用样式<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet" />4、app.module.ts中import { QuillModule } from ...

2019-04-25 22:49:19 1211

原创 ng-zorro

常见更改ui组件的问题：1、如何给弹框增加样式createOrEdit(id?: number): void {this.modalHelper.static(CreateOrEditScaleComponent, { id: id },"lg",{ nzStyle:{"max-width":"60%"}}).subscribe(result => {...

2019-04-25 17:34:41 555

原创 angular如何实现form表单的提交

1)、创建html （主要的标签是input添加双向绑定 [(ngModel)]="intervalTime" name="intervalTime"绑定必须有name属性值对应名称）参考网址：http://www.cnblogs.com/xxx91hx/p/7923237.html2）提交表达数据①定义form表单提交事件（ngSubmit）="saveSetting(表单提交值...

2019-04-23 18:58:13 4995

原创 angular如何创建组件和引入组件

1、创建组件(创建一个headers的组件)命令: ng g c headers命令: ng g c /component/headers (带路径的)2、appmodule.ts中直接引用(HeadersComponent)这个名字必须是有Componentimport { HeadersComponent } from './compontents/headers/head...

2019-04-23 14:29:16 11257

原创 angular路由的配置

1、创建组件(命令行)ng g c components/spatialLocationMemorySpan2、app.module.ts中进行引入import { RouterModule,Routes } from '@angular/router';import { SpatialLocationMemorySpanComponent } from './compontent...

2019-04-23 14:08:07 192

空空如也

空空如也