- 博客(61)
- 收藏
- 关注
RSS订阅原创 Git仓储迁移
裸仓库 虽然不包含工作目录中的实际代码文件，但它包含了所有的 Git 历史数据，包括提交（commits）、分支（branches）、标签（tags）等。你完全可以使用包含工作目录的仓库进行迁移，这样操作对 Git 工作流来说是完全正常的，只需将所有内容推送到新的远程仓库即可。当你将裸仓库推送到新的远程仓库时，所有这些历史数据都会被传输到新的仓库。只包含 Git 数据库：裸仓库中只包含 .git 目录下的内容，存储了所有的提交历史、分支、标签等。检查新的远程仓库，确保所有的分支、提交和标签都已经正确迁移。
2024-08-19 18:03:00
579
原创 删除多余代码后遇到 NG04014 错误：路径匹配策略导致的调试问题
被删除这个文件没有区分生产环境还是开发环境就直接调用了这个函数。就相当于关闭了断言和检查，本该提示路由的这个错就被掩盖了（不影响效果），在我删除了这个文件后，检查就开启了导致页面报错。在 Angular 中，enableProdMode() 是一个用于启用生产模式的函数。终端上也没有报错信息，正纳闷了，我也没升级什么包和改动路由啊，为啥会报这个错呢？今天在移除无用代码时删了一些组件，再打开local环境下就打不开了。在经过一番查找后，找到了罪魁祸手，在一个删除的文件中 调用了。
2024-07-26 16:35:06
238
原创 多维表格/业务库表格大数据量性能瓶颈
表格核心部分的渲染不基于 Angular 组件，而是基于原生 HTML 或者 WebComponent 组件（需要验证性能表现），这种方案的带来的问题是需要自己重写每一种字段的显示组件，无法复用组件库或者业务组件库组件，而单元格的编辑可以通过桥接、定位的方式复用业务组件库组件。先说最终结论：Angular 组件创建性能损耗是当下主要的性能瓶颈。模版套模版性能损甚至比组件套组件损耗大。
2024-06-21 14:09:51
318
原创 rxjs中withLatestFrom操符踩坑记录
官网描述：每当源Observable发出一个值时，它就会使用该值加上其他输入Observable的最新值来计算一个公式，然后发出该公式的输出。注意点：withLatestFrom中的Observable发出值不会被订阅，只会在下次源Observable发出值进行计算时采用最后发出的值例子：⚠️注意：有一个特别需要注意的地方， 也就是我写这篇的原因，这个中的一定要有推出的值，我一开始定义的为Subject类型，也没有在推出值，导致订阅一直不走，改为类型有默认值才可以
2024-01-30 14:15:54
221
原创 Git问题：解决“ssh:connect to host github.com port 22: Connection timed out”
字面上理解就是github在端口号22上面的链接超时了。可以考虑更换git端口号或者重新生成密钥，我重新生成没有解决问题，采用的第一种方案，接下我就想详细说一下第一种方案。
2024-01-17 15:35:44
2974
4
原创 iframe通过postMessage进行跨域通信以及在Angular中使用
在前端开发过程中，会遇到一些需要使用iframe的场景，使用iframe关键的一个点是数据之间的传输，基于同源的要求十分苛刻，大家基本上是都是跨域的，如果跨域进行数据传输呢？大家使用的比较多的就是postMessage()这个方法了，下面将具体展示如何在html中使用iframe进行数据传输，以及在angular框架中如何使用以及在angular中与html中的差异性htmlsrc:string;) {
2023-08-30 17:57:11
1380
原创 一文彻底搞懂事件机制:冒泡、捕获、传播、委托 以及如何阻止冒泡与捕获
遇到的需求是项目预览，我们项目预览采用的是实际项目的代码，能够极大的减少开发量，但是在预览时有些操作是不需要的，就需要将某些click事件去掉，但是这些事件是写在实际项目中，是不能进行修改的，所以就想到了通过阻止事件捕获来取消click事件。：当需要给多个平级dom添加相同事件，可以通过事件委托到父节点，通过给父节点添加事件来避免多次添加事件，随着前端框架的普及以及jquery的没落，用的也就比较少了。：当dom触发了事件后，会先通过事件传播捕获到事件源，然后事件源通过事件传播实现事件冒泡。
2023-08-25 16:15:59
750
原创 git配置ssh登陆后，却一直提示要输入密码？
在网上看到很多都是推荐把密钥的密码设置为空，这样就不需要再输入密码了，我不是太喜欢这种方法，其实会有一种不重置密码的方法。已经生成密钥，并且已经添加到git上后，在进行git远程操作后，还是会要输一次密钥设置的密码。window环境下推荐用git bash或者其他的能使用一些特殊的命令。后面id_ed25519按照实际情况就可以。
2023-08-20 19:47:33
2449
原创 由路由守卫引发的Angular DI inject思考
秉承及时更新代码的原则，我立即对该模块中的路由守卫代码进行了更改，但在修改时遇到了一个问题，即判断逻辑依赖于其他注入，这没有constructor你让我很难办啊。可以让更加方便地在子组件中注入父组件中使用的服务，而不必关心父组件到底使用了哪些注入项。这样的设计可以提高代码的可重用性，使得子组件的实现更加独立，不会被父组件的变化所影响。众所周知，在 Angular 中的组件/指令/管道中如果需要使用某个服务，必须通过构造函数参数注入才可使用。例如，在父组件中使用多个服务时，子组件可以使用。
2023-05-04 17:30:58
561
1
原创 Angular 开发NPM第三方包
将module在app.module中引入，并使用新建的button组件，通过ng-serve启用应用，看到button组件已经生效。解决：更改package.json文件中的“name”值，然后再publish。在angular升级到13以后需要将组件在public-api中进行声明。解决： nrm use npm ，然后再publish。原因一: 当前电脑所使用的npm源未在npm官网上。原因二： 该npm包已经在共有npm网站上存在了。这时候需要用到npm账号。
2023-03-22 21:10:56
542
原创 angular15 路由传参
接收动态传参值： this.activateRoute.params.subscribe(params=>{});通过this.activateRoute.snapshot.paramMap.get()也能一次性获取传值。 跳转a组件。接收查询参数值： this.activateRoute.queryParams.subscribe(params=>{});二：在ts中实现路由跳转功能。
2023-01-09 15:30:42
838
原创 双击事件 如何判断
console.log(“双击触发了”);console.log(“最初的点击”);console.log(“间隔太长”);
2022-12-09 18:32:52
552
1
原创 NgModule 对象
导出的这些可声明对象就是该模块的公共 API 白话文解释为:想要在别的模块使用该模块声明的管道、组件、指令就需要在该模块exports进行声明。imports:这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中 白话文解释为:在其他模块声明的对象想要在该模块使用，就要在 imports 里声明方可使用，当然在其他模块声明的对象想要在其他模块使用，需要在 exports 声明。把一个类标记为 NgModule，并提供配置元数据。
2022-11-14 15:23:24
150
原创 mac中iTerm2配置
3.安装Oh My Zsh插件，开源的，社区驱动框架，用来管理zsh：如果这三种没有安装成功的话可以按照以下方法步骤：1.git clone git@github.com:ohmyzsh/ohmyzsh.git 看自己选择地址 我这里是ssh地址2.加可执行权限 chmod +x ohmyzsh/tools/install.sh3.执行脚本安装 ohmyzsh/tools/install.sh...
2022-07-06 14:08:27
623
原创 angular中格式日期
如何在angular中对数据进行格式化操作有两种方法第一种是利用formatDate方法进行日期格式转换，另一种是利用datePipe管道进行日期数据处理formatDate()方法首先引入import { formatDate } from '@angular/common'import {Component,Inject,LOCALE_ID }from '@angular/core';使用formatDate(value :string|number|date,format:strin
2022-05-25 16:32:55
3202
原创 如何在不同前端项目中使用不同的node版本
说在前面：1.本文只是简单介绍一下如何在不同的前端项目使用不同的ode版本，是不使用nvm的，相当于局部安装，如果已经全局安装了node，这两者互不影响第一步：首先要先下载所需要的node版本下载地址node各个版本，推荐下载安装包第二步：新建一个文件夹专门存放node文件，路径要清晰这个是分别解压后的第三步：编辑webstorm开发工具修改node路径为想要版本的路径 以及npm 就是第二步中存放node的路径第四步：配置node命令如果没有全局安装node 的话，是无法在终端上
2022-04-27 13:23:11
5645
3
原创 http中get和post详解
1.GET在浏览器回退时是无害的,而POST会再次提交请求。2.GET产生的URL地址可以被Bookmark,而POST不可以。3.GET请求会被浏览器主动cache,而POST不会,除非手动设置。4.GET请求只能进行url编码,而POST支持多种编码方式。5.GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。6.GET请求在URL中传送的参数是有长度限制的,而POST么有。7.对参数的数据类型,GET只接受ASCII字符,而POST没有限制。8.GET比POST更
2022-03-21 15:19:54
2863
原创 协商缓存和强缓存
缓存的优点1.减少不必要的数据传输，节省宽带2.减少服务器负担，提升网页性能3.加快客户端加载网页的速度4.用户体验友好缺点资源如果有更改,但客户端不及时更新会造成用户信息滞后,如果老版本有bug的话,情况会更糟糕强缓存强缓存就是强制缓存的意思,当浏览器去请求某个文件时,服务端就在返回头中对该文件进行了缓存配置response header中 cache-control 常见的设置是max-age public private no-cache no-storemax-age 表示缓存
2022-03-17 13:21:34
899
原创 用vue简单实现滚动播放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2022-02-24 14:16:55
1335
原创 ng中 用[]获取对象属性时注意点
let obj ={ name:'张三', age:18}for (let key in obj){ console.log(obj[key]) //会报错 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ LOGOUT: string; }'. No index signature with a parame
2022-02-17 09:42:11
169
原创 angular解决跨域
需求：需要把localhost:4200/api上的所有调用都转给运行在localhost:8080上的服务器可采取以下步骤：1.在项目内新建proxy.config.json文件2.在新建的代理配置文件中输入 和webpack.config.js类似 详细配置可以去官网{ "/api": { "target": "http://localhost:8080", "secure": false }}3.修改angular.json 中配置项"serve": {
2022-02-17 08:39:07
1074
原创 token的学习使用 angular及koa示例
1.客户端用户登录输入账号和密码2.服务端校验账号以及密码,通过后根据用户唯一标识符生成token并返回给客户端示例为node，koa服务端下载对应依赖包npm install jsonwebtoken --save 用法const jwt = require('jsonwebtoken')const secret = 'ZHX_TOKEN'//创建tokenlet token = jwt.sign(obj,secret,opt)//解码tokenjwt.verify(token,s
2022-02-12 14:38:53
766
原创 mousedown和click冲突处理方法
window.onload = () => { let btn = document.getElementById('button-test'); let flag = false let firstTime = 0 let lastTime = 0 btn.onclick = () => { if (flag) { console.log('执行click事件') } ...
2022-02-10 15:36:36
1858
原创 angular中的viewContainerRef使用
viewContainerRef表示可以将一个或多个视图附着到组件中的容器@Directive({selector: ‘[appDynamicComponent]’})export class DynamicComponentDirective {constructor(public viewContainerRef: ViewContainerRef) { }}@ViewChild(DynamicComponentDirective) componentHost: DynamicCompo
2022-01-17 10:10:07
1251
原创 牛客网华为机试题整理
//计算字符串最后一个单词的长度，单词以空格隔开，字符串长度小于5000。var input = readline();function test(text) { return text.split(' ')[text.split(' ').length - 1].length}console.log(test(input));// 写出一个程序，接受一个由字母、数字和空格组成的字符串，和一个字符，然后输出输入字符串中该字符的出现次数。（不区分大小写字母）var input = rea
2022-01-12 20:11:44
1385
原创 angular中的ActivatedRoute服务
export declare class ActivatedRoute { /** An observable of the URL segments matched by this route. */ url: Observable<UrlSegment[]>; //当前路由的path 以及跳转参数 // value对象{ // parameters: //跳转参数 如果为queryParameter则不会出现在这 // path:''
2022-01-09 15:09:58
734
原创 angular中的路由跳转及路由传参方法整理
路由跳转方式 总的大概分为两种通过模板链接进行跳转两种写法 <a routerLink="./component-a">跳转a组件</a> <a [routerLink]="['./component-a']" >跳转a组件</a>定义路由{path: 'component-a', component: ComponentAComponent}定义路由出口<router-outlet></router-ou
2022-01-09 14:07:27
4226
原创 angular中内容投影即插槽slot知识点整理
使用投影来创建灵活的可复用性组件投影分为三种：单插槽内容投影，使用这种投影，组件可以从单一来源接受内容多插槽内容投影，使用这种投影，组件可以从多个来源接受内容有条件的内容投影，使用条件内容投影的组件必须在符合条件时才能接受内容ng-content 元素只是一个占位符，它不会创建真正的dom元素，ng-content 上的自定义属性将会被忽略单插槽内容投影：//内容投影组件模板<p>单插槽内容投影：</p><app-one-content-projection&
2022-01-08 21:05:56
920
原创 angular中的组件交互
在用angular前端中，组件之间的交互十分重要，该篇文件将会对angular框架中组件交互的方式进行一个汇总组件交互大概分为五种类型1.@input 父传子2.@Output 子传父3.本地变量4.@viewChild5.服务@input 父传子父子组件的交互是开发中比较常见的，大家用的也比较熟练，但还是统一记一下吧，就当是复习了父传子时 传引用类型的数据时，在子组件发生改变后，父组件也会发生改变；值类型的数据不会发生变化父传子 会用到@Input 装饰器父组件//模板<a
2022-01-06 16:49:56
813
原创 JavaScript修改checkbox半选中状态
修改checkbox的半选中状态，可以用indeterminate,只能用js去修改true 为半选 ，false取消半选/** * 判断checkbox选择状态，决定全选的状态 * @param data 数据列表 * @param checkBoxId 全选input的id */function checkBoxStatusChange(data, checkBoxId) { // 可以利用some和every来判断是否处于半选状态 some为true every为fals
2022-01-05 10:41:22
1355
原创 typescript中class类知识点整理
ts中的类和js中类基本相同，但还是有所差别，所一还是需要单独去写一下名词解释：派生类：子类 基类：父类一个简单例子class Person { name: string age: number constructor(name: string, age: number) { this.name = name; this.age = age; } say() { console.log(`年龄为${this.ag
2022-01-04 15:54:47
1655
2
原创 ng-template和ng-container及利用ngTemplateOutlet遍历树形结构数据
ng-containerng-container 是angular 定义的一个特殊的语义化标签可以把它理解为一个容器，可以直接包裹任何一个元素，但本身不会生成元素化标签，也不会影响页面布局和样式ng-container 经常用来配合ngif和ngfor进行使用<div [ngStyle]="{'background-color':'yellow'}"> <ng-container *ngFor="let data of valueData"> <div>
2022-01-03 14:54:28
880
2
原创 angular 动态组件 ComponentFactoryResolver
当组件数量不多的话可以利用ngif来判断component组件目录结构模板代码<nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="radioValueChange()"> <label nz-radio nzValue="A">A</label> <label nz-radio nzValue="B">B</label> <label nz-radio nzV
2022-01-03 12:53:15
2155
原创 基于koa2框架 + sequelize项目搭建
1.安装nodejs2.安装koanpm install koa --save3.安装koa2项目生成器npm install koa-generator -g4.生成项目koa2 <项目名称>5.下载node-Modulesnpm install6.此时项目已经生成，并可以运行，还需要sequelizenpm start7.安装sequelizenpm install sequelize --save8.安装mysql mysql2npm install
2022-01-01 23:46:11
970
原创 typescript中interface接口知识点整理
//接口//ts的核心原则之一就是对值所具有的结构进行类型检查//接口的作用就是为类型命名和代码定义规则//基础使用interface Person1 { name: string, age: number}let p1: Person1 = { name: '张三', age: 18}//可选属性 在使用这个接口时，可选属性可以定义也可以不用定义//可选属性可以对可能存在的属性进行预定义；interface Person2 { name:
2021-12-30 16:36:48
836
原创 typescript中基础类型知识点整理
//基础类型 //ts与js相同的基础类型有 boolean number string array 不再多介绍//元组//元组类型允许一个已知类型和元素数量的数组，各元素的类型不必相同let x: [string, number];x = ['hello', 111]; //ok// x = [111 ,'hello'] //error//当访问一个已知索引的元素，会得到正确的类型console.log(typeof x[0]); //stringconsole.log(typeof
2021-12-30 16:34:31
106
原创 nvm的安装
1.下载nvm包在安装之前需要将已有的node卸载，建议用node的exe文件进行卸载下载地址：Git地址2.新建文件夹目录我这里下载的第三个文件，解压后就是exe文件，nodejs文件夹和nvm文件夹都是自己手动建的3.安装nvm路径直接写到自己手动建的nvm路径就可以，点击next会出现一个是否覆盖的选项，选是就可以了这里选择自己手动建的nodejs文件，nvm安装完成后这个文件夹会消失，不必紧张，在选择使用node版本后，会出现的，这个文件夹里存放的就是当前在使用的node版本
2021-12-28 11:12:55
1624
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人