- 博客(70)
- 收藏
- 关注
RSS订阅原创 RxJS基本介绍以及与Promise的区别
Promise 适合处理单一的异步操作，具有更简单的 API，但缺乏灵活性和对多值的支持。RxJS (Observable) 适合处理复杂的异步流和多事件流，具有更多的操作符、错误处理机制和强大的组合能力，适用于事件驱动、流式数据处理和复杂的异步任务。
2024-11-05 16:36:25
716
原创 同一个浏览器中打开了两个 tab 页签（即同一个应用的两个不同实例）的交互
localStorage + storage 事件：适合简单的、基于本地存储的数据同步。WebSocket：适用于实时数据通信，尤其是在多个客户端或 tab 之间需要频繁交互的场景。IndexedDB：适用于跨多个 tab 页签共享较大或复杂的数据。
2024-11-05 15:35:01
435
原创 Angular数据绑定详解
Angular 会维护一个变更检测树，每当发生事件或数据更新时，遍历这棵树并调用相应的检测逻辑。它会在每个变更检测周期检查每个数据属性的当前值和上一个值，如果不同，则更新视图。模板引擎：Angular 的模板引擎会将模板编译成 JavaScript 代码，这些代码在运行时会与组件的类交互。脏检查（Dirty Checking）是指在变更检测过程中，Angular 会检查数据模型的当前值与上一个值之间的差异。在变更检测过程中，Angular 会遍历组件树，依次检查每个组件的所有数据绑定。
2024-11-04 10:31:52
1076
原创 虚拟滚动 - 从基本实现到 Angular CDK
在大数据列表的处理上，虚拟滚动是一种优化性能的有效方式。本篇文章将详细介绍两种常见的虚拟滚动实现方式：使用transform属性和。重点讲解如何通过transform属性实现高效的虚拟滚动，并对比中的实现，探讨其在渲染优化中的应用。计算总高度：用于撑起滚动效果，使滚动条能够覆盖整个数据集。实时更新可见数据项的范围：通过只渲染视口内的数据项，减少 DOM 节点的数量，提高性能。设置偏移量：确保渲染的 DOM 元素处于正确的位置，保持用户体验的一致性。
2024-10-31 16:01:46
1189
原创 Angular中ChangeDetectorRef.detectChanges是如何实现的，对比vue种的nextTick有何不同
是 Angular 中用于手动触发变更检测的方法。它的主要作用是立即检查组件的视图和数据绑定，更新界面以反映模型数据的变化。AngularAngularZone.jsAngularZone.jssetTimeoutPromiseAngularOnPush同步更新视图过程是通过一个分层的变更检测机制来实现的。以下是详细步骤：Angular初始化组件树时，会为每个组件和指令创建ViewRef或。这些视图引用形成了一个树状结构，用于记录每个组件的状态和依赖。调用触发变更检测：当被调用时，
2024-10-28 16:18:40
1050
原创 Angular 控制流与延迟视图揭秘
控制流是指程序中决定语句执行顺序的机制。它通过顺序、选择（条件判断）、循环等结构，使程序能够根据不同条件或规则执行不同的代码块，实现灵活的逻辑控制，代码中常见的 if-else for 都属于控制流语法。
2024-10-24 17:52:09
1084
原创 Angular 15 独立组件详解
在 Angular 15 中，独立 APIs 正式稳定，开发人员可以使用独立组件开发各种组件、指令、管道和构建应用程序。独立 APIs 减少了在开发时对 ngModule 的依赖，提升了开发体验。目前，组件库 ngx-tethys 紧跟 Angular 脚步，现在已支持独立组件。独立组件提供了一种简化的方式来构建 Angular 应用程序。独立组件、指令和管道旨在通过减少对 NgModule 的需求来简化创作体验。现有应用程序可以选择性地以增量方式采用新的独立风格，而无需任何重大更改。
2024-10-23 10:04:13
1299
原创 Angular signal信号详细解析
Angular Signals 提供了一种轻量级的响应式状态管理方式，尤其适用于局部状态或简单的同步数据流。相比 RxJS 和传统的 Angular 变更检测，Signals 更加直接和高效，减少了对全局变更检测的依赖。
2024-10-15 14:53:25
743
1
原创 document.cookie 获取浏览器上应用的cookie不全是什么原因
HttpOnly 属性：如果 cookie 被设置为 HttpOnly，则 JavaScript 无法访问该 cookie，属性是在设置 cookie 时指定的，旨在防止客户端脚本访问该 cookie。SameSite 属性：某些 SameSite 设置可能会限制 cookie 的发送，尤其是在跨站请求中。路径限制：Cookies 设置了特定的路径，只有在该路径下才能访问到。隐私设置：某些浏览器的隐私设置或扩展可能阻止访问某些 cookie。过期或被删除：cookie 可能已经过期或被删除。
2024-09-27 17:10:03
604
原创 Git仓储迁移
裸仓库 虽然不包含工作目录中的实际代码文件，但它包含了所有的 Git 历史数据，包括提交（commits）、分支（branches）、标签（tags）等。你完全可以使用包含工作目录的仓库进行迁移，这样操作对 Git 工作流来说是完全正常的，只需将所有内容推送到新的远程仓库即可。当你将裸仓库推送到新的远程仓库时，所有这些历史数据都会被传输到新的仓库。只包含 Git 数据库：裸仓库中只包含 .git 目录下的内容，存储了所有的提交历史、分支、标签等。检查新的远程仓库，确保所有的分支、提交和标签都已经正确迁移。
2024-08-19 18:03:00
1025
1
原创 删除多余代码后遇到 NG04014 错误：路径匹配策略导致的调试问题
被删除这个文件没有区分生产环境还是开发环境就直接调用了这个函数。就相当于关闭了断言和检查，本该提示路由的这个错就被掩盖了（不影响效果），在我删除了这个文件后，检查就开启了导致页面报错。在 Angular 中，enableProdMode() 是一个用于启用生产模式的函数。终端上也没有报错信息，正纳闷了，我也没升级什么包和改动路由啊，为啥会报这个错呢？今天在移除无用代码时删了一些组件，再打开local环境下就打不开了。在经过一番查找后，找到了罪魁祸手，在一个删除的文件中 调用了。
2024-07-26 16:35:06
357
原创 多维表格/业务库表格大数据量性能瓶颈
表格核心部分的渲染不基于 Angular 组件，而是基于原生 HTML 或者 WebComponent 组件（需要验证性能表现），这种方案的带来的问题是需要自己重写每一种字段的显示组件，无法复用组件库或者业务组件库组件，而单元格的编辑可以通过桥接、定位的方式复用业务组件库组件。先说最终结论：Angular 组件创建性能损耗是当下主要的性能瓶颈。模版套模版性能损甚至比组件套组件损耗大。
2024-06-21 14:09:51
391
原创 rxjs中withLatestFrom操符踩坑记录
官网描述：每当源Observable发出一个值时，它就会使用该值加上其他输入Observable的最新值来计算一个公式，然后发出该公式的输出。注意点：withLatestFrom中的Observable发出值不会被订阅，只会在下次源Observable发出值进行计算时采用最后发出的值例子：⚠️注意：有一个特别需要注意的地方， 也就是我写这篇的原因，这个中的一定要有推出的值，我一开始定义的为Subject类型，也没有在推出值，导致订阅一直不走，改为类型有默认值才可以
2024-01-30 14:15:54
279
原创 Git问题：解决“ssh:connect to host github.com port 22: Connection timed out”
字面上理解就是github在端口号22上面的链接超时了。可以考虑更换git端口号或者重新生成密钥，我重新生成没有解决问题，采用的第一种方案，接下我就想详细说一下第一种方案。
2024-01-17 15:35:44
3623
4
原创 iframe通过postMessage进行跨域通信以及在Angular中使用
在前端开发过程中，会遇到一些需要使用iframe的场景，使用iframe关键的一个点是数据之间的传输，基于同源的要求十分苛刻，大家基本上是都是跨域的，如果跨域进行数据传输呢？大家使用的比较多的就是postMessage()这个方法了，下面将具体展示如何在html中使用iframe进行数据传输，以及在angular框架中如何使用以及在angular中与html中的差异性htmlsrc:string;) {
2023-08-30 17:57:11
1537
原创 一文彻底搞懂事件机制:冒泡、捕获、传播、委托 以及如何阻止冒泡与捕获
遇到的需求是项目预览，我们项目预览采用的是实际项目的代码，能够极大的减少开发量，但是在预览时有些操作是不需要的，就需要将某些click事件去掉，但是这些事件是写在实际项目中，是不能进行修改的，所以就想到了通过阻止事件捕获来取消click事件。：当需要给多个平级dom添加相同事件，可以通过事件委托到父节点，通过给父节点添加事件来避免多次添加事件，随着前端框架的普及以及jquery的没落，用的也就比较少了。：当dom触发了事件后，会先通过事件传播捕获到事件源，然后事件源通过事件传播实现事件冒泡。
2023-08-25 16:15:59
835
原创 git配置ssh登陆后，却一直提示要输入密码？
在网上看到很多都是推荐把密钥的密码设置为空，这样就不需要再输入密码了，我不是太喜欢这种方法，其实会有一种不重置密码的方法。已经生成密钥，并且已经添加到git上后，在进行git远程操作后，还是会要输一次密钥设置的密码。window环境下推荐用git bash或者其他的能使用一些特殊的命令。后面id_ed25519按照实际情况就可以。
2023-08-20 19:47:33
3183
原创 由路由守卫引发的Angular DI inject思考
秉承及时更新代码的原则，我立即对该模块中的路由守卫代码进行了更改，但在修改时遇到了一个问题，即判断逻辑依赖于其他注入，这没有constructor你让我很难办啊。可以让更加方便地在子组件中注入父组件中使用的服务，而不必关心父组件到底使用了哪些注入项。这样的设计可以提高代码的可重用性，使得子组件的实现更加独立，不会被父组件的变化所影响。众所周知，在 Angular 中的组件/指令/管道中如果需要使用某个服务，必须通过构造函数参数注入才可使用。例如，在父组件中使用多个服务时，子组件可以使用。
2023-05-04 17:30:58
619
原创 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
613
原创 angular15 路由传参
接收动态传参值： this.activateRoute.params.subscribe(params=>{});通过this.activateRoute.snapshot.paramMap.get()也能一次性获取传值。 跳转a组件。接收查询参数值： this.activateRoute.queryParams.subscribe(params=>{});二：在ts中实现路由跳转功能。
2023-01-09 15:30:42
909
原创 双击事件 如何判断
console.log(“双击触发了”);console.log(“最初的点击”);console.log(“间隔太长”);
2022-12-09 18:32:52
592
1
原创 NgModule 对象
导出的这些可声明对象就是该模块的公共 API 白话文解释为:想要在别的模块使用该模块声明的管道、组件、指令就需要在该模块exports进行声明。imports:这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中 白话文解释为:在其他模块声明的对象想要在该模块使用，就要在 imports 里声明方可使用，当然在其他模块声明的对象想要在其他模块使用，需要在 exports 声明。把一个类标记为 NgModule，并提供配置元数据。
2022-11-14 15:23:24
209
原创 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
731
原创 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
3500
原创 如何在不同前端项目中使用不同的node版本
说在前面：1.本文只是简单介绍一下如何在不同的前端项目使用不同的ode版本，是不使用nvm的，相当于局部安装，如果已经全局安装了node，这两者互不影响第一步：首先要先下载所需要的node版本下载地址node各个版本，推荐下载安装包第二步：新建一个文件夹专门存放node文件，路径要清晰这个是分别解压后的第三步：编辑webstorm开发工具修改node路径为想要版本的路径 以及npm 就是第二步中存放node的路径第四步：配置node命令如果没有全局安装node 的话，是无法在终端上
2022-04-27 13:23:11
6144
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
2979
原创 协商缓存和强缓存
缓存的优点1.减少不必要的数据传输，节省宽带2.减少服务器负担，提升网页性能3.加快客户端加载网页的速度4.用户体验友好缺点资源如果有更改,但客户端不及时更新会造成用户信息滞后,如果老版本有bug的话,情况会更糟糕强缓存强缓存就是强制缓存的意思,当浏览器去请求某个文件时,服务端就在返回头中对该文件进行了缓存配置response header中 cache-control 常见的设置是max-age public private no-cache no-storemax-age 表示缓存
2022-03-17 13:21:34
952
原创 用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
1410
原创 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
202
原创 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
1126
原创 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
819
原创 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
1995
原创 angular中的viewContainerRef使用
viewContainerRef表示可以将一个或多个视图附着到组件中的容器@Directive({selector: ‘[appDynamicComponent]’})export class DynamicComponentDirective {constructor(public viewContainerRef: ViewContainerRef) { }}@ViewChild(DynamicComponentDirective) componentHost: DynamicCompo
2022-01-17 10:10:07
1349
原创 牛客网华为机试题整理
//计算字符串最后一个单词的长度，单词以空格隔开，字符串长度小于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
1446
原创 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
793
原创 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
4504
原创 angular中内容投影即插槽slot知识点整理
使用投影来创建灵活的可复用性组件投影分为三种：单插槽内容投影，使用这种投影，组件可以从单一来源接受内容多插槽内容投影，使用这种投影，组件可以从多个来源接受内容有条件的内容投影，使用条件内容投影的组件必须在符合条件时才能接受内容ng-content 元素只是一个占位符，它不会创建真正的dom元素，ng-content 上的自定义属性将会被忽略单插槽内容投影：//内容投影组件模板<p>单插槽内容投影：</p><app-one-content-projection&
2022-01-08 21:05:56
993
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人