KenkoTech-优快云博客

原创 Angular由一个bug说起之十五：自定义基于Overlay的Tooltip

要注意，在tooltip被触发时再创建OverlayRef以避免不必要的性能开销。等，为了统一管理overlay的内容，我们需要创建一个OverlayToolTipComponent用来展示具体的tooltip。工具提示（tooltip）是一个常见的 UI 组件，用于在用户与页面元素交互时提供额外的信息。允许用户指定tooltip的位置和tooltip是否可以自适应位置。这样我们就在不引入其他库的前提下完成了一个内容丰富位置灵活的。还可以指定tooltip和目标元素之间的距离，也可以增加。

2025-03-27 10:50:20 598

原创 Angular由一个bug说起之十四：SCSS @import 警告与解决⽅案

SCSS @import 警告与解决⽅案⚠ 警告信息?为什么会有这个警告？Sass 官⽅已经废弃 @import ，推荐使⽤ @use 和 @forward 进⾏模块化管理。其主要原因包括：1.： @import 允许多个⽂件共享变量和混合宏，可能导致命名冲突。2.： @import 可能导致相同的⽂件被导⼊多次，影响编译性能。3.： @import 导⼊的所有内容都是全局的，⽽ @use 采⽤更严格的作⽤域管理，避免变量污染。?如何复现这个警告？

2025-03-12 09:23:31 543

原创 Angular由一个bug说起之十三：Cross Origin

基本流程是这样的，浏览器先发起一个options请求，携带这个几个请求头，Origin（发起请求的源），Access-Control-Request-Method（实际请求的HTTP方法），Access-Control-Request-Headers（实际请求中使用的自定义头）。link，script，img这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响。而浏览器给服务器发送请求时，他们的源一样，就是同源请求，反之就是非同源请求，非同源请求又称为跨域。

2025-01-06 15:25:27 1141

原创 Angular由一个bug说起之十二：网页页面持续占用CPU过高

我意识到我的结论下的太早了，我需要更多的信息来找出真正的原因。而随之而来的性能问题也不容小觑。它使用浏览器的刷新率作为参考，确保动画帧的更新在每一帧之间的间隔是最佳的，从而实现更加流畅和自然的动画效果。requestAnimationFrame 作为一种高频发的事件，假如在回调函数中频繁的进行 DOM 操作，并且没有及时停止事件的触发，就会对性能造成巨大的影响。window.resize 中的 DOM 操作是为了给一个变量赋值，而这个变量在 scroll 的回调中被用到，而其它的代码已经失去了实际的作用。

2024-12-11 16:14:58 1165

原创 Angular由一个bug说起之十一：排序之后无法展开 Row

在实现中，我们只使用了 `row` 参数，并返回了 `row.id` 作为唯一标识。但在排序的场景下，这种实现会导致渲染错误。在 `trackBy` 函数中，我们返回了 `row.id` 作为唯一标识符，但在排序的过程中，`row.id` 并不能反映数据的新位置，导致 Angular 的变更检测机制无法正确判断哪些 DOM 元素需要更新，从而引发渲染错误。排序后，原本应该渲染为 `Parent Row` 的内容，被错误地渲染为 `Child Row`，导致 `Parent Row` 无法展开。

2024-12-06 11:19:30 889

原创 Angular进阶之十一：从 Rxjs 获得的启发——改良方法传入参数的形式

假设我们能制定一些详细的、明确的规范，比如上面提到的三点，我们就能把抽象的东西具象化。就是这样一次次的努力，提升了代码的效率，保证了项目的健康发展。第一眼看到这个方法时我的反应是到此为止吧，不要去修改这个方法，甚至不用去看里面的逻辑，就让它安静的躺在那里就行了。但是当我们的项目越来越大，越来越复杂，函数的参数也会越来越多，到最后可能会出现几乎不可维护的方法。程序设计原则是一个老生常谈的话题了，它很容易被忽视，而当我们想到它的时候往往已经是积重难返了。的目的是增强参数的语义化以及降低项目的维护难度。

2024-11-20 11:12:41 610

原创 Angular进阶之十：toPromise废弃原因及解决方案

如果源 Observable 未完成或未发出，您最终会得到一个挂起的 Promise，并且异步函数的所有状态都可能挂在内存中。如果您知道 Observable 将发出至少一个值或最终会完成，则应使用。Rxjs从V7开始废弃了toPromise, V8中会删除它。仅当您知道 Observable 最终会完成时才使用。为了避免这种情况，请考虑添加。

2024-11-06 16:48:38 1033

原创 Angular由一个bug说起之十：npm Unsupported engine

这个可能是因为nodejs版本虽然不一样，但你的nodejs版本能兼容它所要求的版本，功能都能正常使用。这个原因有很多，可能是这个包依赖某个nodejs版本特有的API，因为不同的nodejs版本可能有不同的api，升级了之后这个api可能就被删除或者修改了，不符合包的要求了。第二种就是升级你的包，有些包升级了之后对nodejs的要求也不一样了，可能升级之后就符合你的nodejs版本了，这要看具体的包。又或者说是这个包所使用的包对nodejs版本有要求，所以连带着这个包也得对nodejs版本有要求。

2024-09-23 11:18:09 1036

原创 Angular由一个bug说起之九：AWS S3 文件下载问题

当从 S3 下载文件时，Content-Disposition 响应头默认使用 ISO-8859-1 编码，这在处理非西欧语言的文件名时产生了问题。此头中包含的文件名默认使用 ISO-8859-1 编码，这在处理中文、日文、韩文等语言的文件名时就会出现问题，因为这些字符在 ISO-8859-1 编码中是无法表示的。通过在 JavaScript 应用程序中采用正确的编码策略和设置请求头，您可以确保在使用 AWS S3 服务时，即使文件名包含 Unicode 字符，也能正确显示和下载。

2024-08-14 16:58:16 953

原创 Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题

之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。

2024-07-24 16:20:17 1029

原创 Angular由一个bug说起之七：npm的overrides确实不知道有哪个场景可以用

最后总结一下，如果下大力气去找几个包都能工作的折衷的版本，兴许也是可以找到的。但是这个付出的精力很不划算，如果其中有一个包有安全问题等等的话，所有的努力就都白费了。而且这并不是我们第一次尝试使用overrides，上一次当vm2　（）遇到安全问题时，我们也尝试过用overrides直接升级它的版本来避开安全问题，结果也同样是遇到了兼容性问题而放弃。经历过这样两次的故事之后，我们应该是不会再考虑这个overrides了。也真是不知道它在什么场合下可以发挥作用。

2024-07-23 15:44:48 473

原创 Angular Material 升级之跟随Google累死大活人

但是由于项目大且复杂，所以我采取的方案是为每一个material组件创建一个less文件，用新的路径覆盖已经失效的class路径。把page1, page2, page3, page4样式文件中对dialog样式的设置提取到一个文件中，以减少文件修改的数量。与旧实现中的元素大致对应的元素已被赋予相同的class名（前缀除外）。但是运行之后，发现组件的样式被破坏了，这是由于material组件重构之后style, API,定义的默认排版级别已更新，以反映 Material Design 规范的变化。

2024-07-17 10:49:07 457

原创 Angular进阶之九： JS code coverage是如何运作的

环境准备需要用到的包如何使用1. 创建一个简单的js项目，项目结构如下2. 每个文件里都有什么，怎么使用index.js.nycrc配置nyc获取哪些文件的覆盖率和数据输出位置3.生成coverage 报告通过上面的配置一个简单的已经算是完成了执行即可在控制台看到报告的输出从图中可以看到index.js覆盖率为66.66%如何找到没有被覆盖的代码，可以执行生成更为详细的报告，这个命令使用读取抓取的测试输出结果json生成html文件打开。

2024-07-08 09:56:15 572

原创 Angular 由一个bug说起之六：字体预加载

浏览器在加载一个页面时，会解析网页中的html和css，并开始加载字体文件。字体文件可以通过css中的@font-face规则指定，并使用url()函数指定字体文件的路径。比如下面这样:css@font-face { font-family: 'MyFont'; src: url('path/to/font.woff2') format('woff2'), url('path/to/font.woff') format('woff');}body {

2024-06-04 11:10:56 788

原创 Angular 由一个bug说起之五：为什么现代CSS系统倾向于少用或不用absolute定位？

在过去，使用position: absolute定位元素是一种常见的技术，但是随着前端开发的发展，现代CSS系统倾向于减少或避免使用absolute定位。在实际项目中，我们应该优先考虑使用基于文档流的布局方法，只有在必要时才使用absolute定位。在大型项目中，随着页面结构的变化，维护absolute定位的元素可能需要更多的时间和精力。absolute定位的元素可能会遮挡屏幕阅读器的内容，降低网站的可访问性。使用基于文档流的布局可以确保内容在阅读器中正确呈现，提高了网站的可访问性。

2024-04-26 14:17:47 614

原创 Angular进阶之八： Angular Animation在项目中的实践经验

所以如果绑定动画的组件中存在不同的定位，最好是都统一成一个方向的绝对定位。我在实际的项目中体会到，相比 css 动画，Angular Animation 最大的优点是能够提供一系列很准确的关键帧回调函数(callback)。这是官方文档的说法，但实际上它监听的是 animation state 的改变。特别要注意的是删除节点的操作需要在第二步完成，所以我们需要监听第一个步骤完成时的回调。在渲染时会解析组件中所有的子组件，这在性能上会造成极大的损耗，所以应当尽量减少动画所影响到的组件。

2024-03-19 16:29:29 1160

原创 Angular 由一个bug说起之四：jsonEditor使用不当造成的bug

是字符串，或者相应的捕获组在正则表达式中不存在，则该模式将被替换为一个字面量。如果该组存在但未匹配（因为它是一个分支的一部分），则将用空字符串替换它。替换字符串可以包括以下特殊替换模。，但是实际结果是被替换为。

2024-03-01 11:15:04 561

翻译 Angular进阶之七：不要在html template中使用函数（翻译）

因为在OnPush 策略下，变更检测会在第一次检查后被禁用，当输入属性（@Input）没有发生改变时，Angualr会跳过OnPush 控件以及其子控件。在上边的示例中，我们可以在person被更改时计算全名，因此我们可以添加一个fullName属性，当ngOnChanges 中改变person输入的值时，重新计算fullName的值。但是，这并没有解决潜在的性能问题。此时， Angular Template 里没有任何函数的踪迹，但是 get fullName() 每次在变更检测时都会被调用。

2024-01-23 10:45:23 199

原创 Angular进阶之六：Progressive rendering

通过自定义指令将数据加载设计为异步操作，我们成功地实现了 Progressive Rendering，使得页面在数据加载的同时逐步呈现，提高了用户体验。在本文中，我们将探讨如何在 Angular 中通过自定义指令实现 Progressive Rendering，特别是处理从服务器获取大量数据的场景。通过自定义指令将数据加载设计为异步操作，并在数据加载的同时允许页面逐步渲染，以提高用户对应用的感知。运行你的 Angular 应用，你将看到页面在加载过程中逐步呈现列表项，提高了用户对应用的感知。

2023-12-28 15:01:33 896

原创 Angular 进阶之五： Signals到底用不用？

在上面例子中increase使用set每次用新数组更新signal，decrease使用update，每次只改原来的数组，在子组件中，会看到，increase会触发子组件的ngOnChange，但是decrease不会。两个组件，父组件的html template里绑定了computedNames，和canDecrease，从外表也看不出来区别，但是如果使用鼠标在蓝色区域晃动，控制台就会打印canDecrease被不停调用，computedNames没事，这个例子说明了。我们用下面一个简单的例子来说明。

2023-12-22 16:00:49 1693

原创 Angular 进阶之四：SSR 应用场景与局限

尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。等生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；构建的页面可以爬到页面上的所有内容，包括其中一些在后端渲染好的数据，其中读取到的数据都可以用作。将页面渲染移动到服务器端，页面的每一次点击、修改都需要调用因此会增加服务器的压力，以其相比还是。内容丰富，复杂交互的动态网页，对首屏加载有要求的项目，对。，网络爬中就可以抓取到完整页面的信息。

2023-12-05 11:00:38 699

原创 Angular 由一个bug说起之三：为什么时不时出现额外的水平/垂直滚动条？怎样能更好的防止它的出现？

虽然视图的内容也是由我们来控制，看似是不会出现滚动条的情况，但是我们的页面是可以互动的。通过分析并明确视窗与内容的关系，我们不仅能有效避免上述情况的发生，还能降低其它问题出现的概率。而当元素里的内容（包括文本内容、图片、视频等内容）的大小超出窗口的大小区域时，内容会有一部分显示在盒子所在区域的外部，这就是。制定并遵循代码规范。规范的代码也是考察程序员能力的一个方面，清晰整洁的代码能够规避很多错误，并且也易于维护。视图窗口简单来说就是呈现内容的视口，浏览器就是一个窗口，其中所显示的内容就是视图内容。

2023-12-04 14:00:01 501

原创 Angular 由一个bug说起之二：trackBy的一点注意事项

接下来我改变一下数据，调用一下changeData，把张三变成未婚，王五变成已婚。数据正常更新了，这是没有加trackBy的时候，现在添加一下trackBy。组件没有重新生成，数据也没有更新，这是因为test组件的更新机制有问题。我在这里循环一个数组，显示人物的资料，姓名，年龄，婚否。接下来我用一个例子来演示一下。点击changeData。

2023-11-16 15:46:15 1861

原创 Angular 由一个bug说起之一：List / Grid的性能问题

3：使用trackBy，trackBy是angular提供的函数，来告诉angular怎么跟踪数组里的项目。这会减少不必要的DOM的删除和重建。4：但是对于更复杂的表的使用，比如分组管理数据。打开或者关闭某个组的时候，还要操作DOM，那么在以上几种方法的基础上可能还会卡顿。在angular中，MatTable构建简单，使用范围广。使用过多的ngStyle或者ngClass。第一次渲染会卡顿，且ngStyle的值未被覆盖。一次性渲染太多数据，这会花费CPU很多时间。以上就是几种常用的优化方法。

2023-11-10 15:21:18 1187

原创 Angular安全专辑之五 —— 防止URL中敏感信息泄露

由于URL 可能会被第三方拦截和查看（比如互联网服务商、代理或者其他监视网络流量的攻击者），所以URL中的敏感数据会带来安全风险，攻击者可能会捕获并使用它进行攻击。：攻击者可以创建模仿合法网站的虚假网页，并在 URL 中包含敏感数据，以诱骗用户泄露其登录凭据或其他敏感信息。: URL 中的敏感数据泄露会被攻击者拦截，并导致个人身份信息或者系统机密信息泄露。：攻击者可以使用URL中的敏感数据对用户账户进行未授权的访问，并执行各种恶意活动。这样就可以防止auth token 在URL里出现了。

2023-10-16 11:04:51 884

原创 Angular安全专辑之四 —— 避免服务端可能的资源耗尽(NodeJS)

如防止爬虫过度爬取、防止暴力破解密码、避免频繁调用支付接口等。提供可定制的响应如429 Too Many Requests。地址或其他标准轻松地对请求进行速率限制。包括基础限制、路由限制、动态限制、自定义。应用程序中实现速率限制。方便地集成到Express应用中。是一个轻量实用的速率限制中间件。基于IP地址实现速率限制。设置最大请求数和时间窗口。请求频率进行限制的场景。框架的一个流行中间件。应用的流量进行管控。

2023-08-31 11:07:20 1605

原创 Angular安全专辑之三 —— 授权绕过，利用漏洞控制管理员账户

管理员用户的邮箱地址受到保护，不能更改为攻击者的邮箱地址，攻击者也就不能通过忘记密码功能获取到管理员权限了。而且由于攻击者此时拥有管理员权限，所以造成的损失将是非常巨大的。，不同的用户拥有不同的权限。相对来说管理员账户所对应的权限是极高的，它可以修改当前用户或者比它权限低的账户信息。注意：管理员用户可以没有任何限制的修改邮箱地址，所以即便是邮箱的域名被修改(@example.com -> @xxx.com)也是合法的。角色的经过身份验证的用户可以结合更新用户信息的方法和。比如我的项目所遇到的问题，具有。

2023-08-29 16:36:08 1198

Angular 进阶之 —— ngx-resource

空空如也