悦涵仙子-优快云博客

原创 Angular项目改端口号

如果是生产环境（如通过 nginx 或 Node.js 部署），端口由部署的服务器配置决定，需修改对应的服务器配置文件（如 nginx.conf 或 server.js）。找到 projects -> [project-name] -> architect -> serve -> options。绑定 IP 允许局域网访问 ng serve --host 0.0.0.0 --port 4300。终止占用端口的进程（如 kill -9 $(lsof -t -i:4300)）。

2025-03-28 11:47:25 295

原创 angular获取roleFormGroup的control值

在 Angular 中，如果你想获取 roleFormGroup 中某个控件的值，可以使用 get() 方法结合 value 属性。根据你的代码，你似乎想获取 functionRoles 控件的值，并手动设置它的值为 [‘1’, ‘4’]。这是正确的，但如果 functionRoles 是一个 FormArray（动态表单），可能需要用 patchValue() 或逐个设置值。获取值：this.roleFormGroup.get(‘controlName’)?是可选的，防止 get() 返回 null）。

2025-03-28 11:32:11 293

原创根据给定的数组动态添加 FormControl

动态表单更新：如果后续需要删除控件，用 this.roleFormGroup.removeControl(controlName)。初始值：new FormControl([], []) 表示初始值为空数组，无同步校验器。

2025-03-28 11:27:00 228

原创遍历树并过滤出叶子节点的key，value值

要遍历树并过滤出所有叶子节点（isLeaf: true）的 key 和 value 值，可以使用递归或迭代的方式。动态表单控件：用 addControl 添加 FormControl，控件名格式为 {key}_dataRoles。初始值：直接将叶子节点的 value 作为表单控件的初始值。遍历树：递归或迭代提取叶子节点的 key 和 value。方法 3：使用 Array.flatMap（函数式风格）动态添加表单控件（结合问题需求）方法 2：迭代遍历（栈实现）方法 1：递归遍历（推荐）

2025-03-28 11:21:01 201

原创遍历树并过滤出叶子节点的key值

key 重复问题：你的示例数据中多个节点使用了相同的 key（如 “1000” 和 “1001”），确保业务逻辑允许这种情况。输出：去重后的叶子节点 key: [“1000”, “1001”, “1010”]性能优化：对于深层嵌套的大树，迭代（方法2）比递归更安全。方法 3：使用 Array.flatMap（函数式风格）方法 2：迭代遍历（栈实现）方法 1：递归遍历（推荐）

2025-03-28 11:13:18 109

原创 Angular 的 nz-tree（NG-ZORRO 树组件）中设置选中状态

nzCheckedKeys 和 formControl 同步：确保表单控件的值（如 select）与树的选中状态一致。性能优化：如果树节点较多，避免频繁更新 checkedKeys 或 expandedKeys。key 的唯一性：树节点的 key 必须唯一，否则选中状态会冲突。通过以上方法，你可以灵活控制 nz-tree 的选中状态！

2025-03-28 11:08:08 337

原创 NG-ZORRO 树结构的扁平化

如果需要高性能虚拟滚动，建议考虑其他方案（如 cdk-virtual-scroll + 自定义树组件）。如果你有更具体的需求（例如动态加载扁平数据），可以提供更多细节，我可以帮你优化实现！nz-tree 的数据结构是嵌套的（nzData），而不是扁平的。使用 *ngFor + 缩进样式模拟树形结构（适用于简单场景）。换用 Angular Material 的（如果项目允许）。推荐使用原生嵌套结构（nzData），避免复杂转换。再转换为嵌套结构（nz-tree 需要的格式）。

2025-03-28 10:54:07 211

原创 NG-ZORRO中tree组件的getCheckedNodeList怎么使用

在 NG-ZORRO（Ant Design for Angular）的 Tree 组件中，getCheckedNodeList 方法用于获取当前选中的节点列表（包括半选状态节点）。nzCheckedKeys 是双向绑定的选中 key 数组，而 getCheckedNodeList 返回的是完整的节点对象（包含 title、children 等属性）。如果节点是异步加载的，调用 getCheckedNodeList 前需确保数据已渲染（可在 setTimeout 或数据加载完成的回调中调用）。

2025-03-28 10:42:51 384

原创 Git删除并重新推送远程分支操作

完成这些步骤后，新的远程分支 new-branch 将被推送到远程仓库。

2025-03-18 11:40:09 301

原创合并pull request的过程

合并pull request的过程。

2025-03-14 14:47:10 239

原创安装多个版本的nodejs-nvm

下载安装程序并运行,按照提示完成安装。Windows: 使用。

2025-03-04 13:16:30 220

原创自定义 RouterLink 组件 v-slot custom

这个示例展示了如何使用 Vue Router 的 router-link 的 custom 属性和 v-slot 来实现高度自定义的路由导航组件。通过 v-slot，我们可以访问到 navigate 函数来控制导航，并可以根据路由的活动状态来动态改变按钮的样式。插槽：我们通过插槽传入了按钮的文本内容，例如 “Go to Home”、“Go to About” 等，允许每个链接自定义显示的文本。custom 属性：启用了 router-link 的自定义插槽，允许我们替换默认的。

2024-11-26 15:36:24 726

原创 vueuse中的useTemplateRefsList

在 v-for 中绑定 ref 到模板元素和组件的简写方式。

2024-11-26 14:25:56 578

原创 Vue3中的v-model

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers proptitle?: string,: {: {: {: {emit('update:modelValue' , false) emit('update:title' , '我要改变') }()emit('update:title', '我要改变')

2024-11-21 14:15:58 597

原创 Vue3中的TSX

在 Vue 3 中，有两种声明组件的方式。

2024-11-21 14:00:35 863

原创 Vue3中的兄弟组件传参与Mitt

实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。在 Vue 3 中，兄弟组件之间传参无法直接进行，需要通过共同的父组件或全局状态管理工具来实现。3.使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有。兄弟A组件更改从父组件provide过来的值，导致兄弟B组件inject的值也发生改变。兄弟组件可以通过父组件传递数据，利用事件 (emit) 和 props 实现通信。// 用于存储兄弟组件之间传递的数据。A组件派发（emit）

2024-11-21 13:10:28 960

原创 Vue3中的祖孙组件通信——provide&inject

在 Vue 3 中，provide 和 inject 是一对用于依赖注入的 API，可以在组件树中共享数据或功能，而无需通过 props 明确传递或使用事件进行通信。这对于管理共享状态、配置或服务特别有用。

2024-11-21 11:27:07 460

原创 Vue3中的父子组件通信——defineProps,defineEmits,defineExpose

defineProps 提供了一种简洁的方式来声明和处理组件的 props，尤其是在 Vue 3 的 Composition API 中。在 Vue 3 中，defineProps 是 Composition API 中的一个函数，用于在子组件中声明接收的 props。在这个例子中，defineProps 会返回一个 props 对象，你可以在组件中通过解构或直接引用来访问传递进来的 props。语法糖，在常规的 Vue 3 Composition API 中，你还是需要使用 props 选项。

2024-11-16 16:45:59 1854

原创认识Reactive全家桶

这样赋值页面是不会变化的因为会脱离响应式。

2024-11-13 20:19:49 227

原创代码赏析（1）

作用域插槽keep-alive的include属性动态组件

2024-11-12 17:11:15 322

原创 toRef，toRefs，toRaw的用法

【代码】toRef，toRefs，toRaw。

2024-11-11 22:25:23 296

原创 JavaScript 库-qs的使用

qs 是一个常用的 JavaScript 库（全称为 query-string 或 qs），它用于处理 URL 查询字符串。qs.parse(query) 会将查询字符串解析成一个对象。假设有一个查询字符串 param1=value1¶m2=value2，语句解析：qs.parse(query)

2024-11-09 21:12:48 509

原创可选链操作符（Optional Chaining）

它允许你安全地访问对象的嵌套属性，而不会因为中间某个属性为 null 或 undefined 而导致程序抛出错误。

2024-11-06 19:16:34 296

原创 CSS中的变量应用——:root,Sass变量，JavaScript中使用Sass变量，vue3中使用js中定义的响应式变量

在 SCSS 文件中定义 CSS 自定义属性。然后通过 JavaScript 读取这些属性。:root {使用示例.login {

2024-11-04 19:43:58 611

原创芋道前端Vue项目中的配置文件

env.stage.env.prod.env.local.env.dev.gitignore。

2024-11-03 12:29:02 464

原创 Vite学习之模式

NODE_ENV=…可以在命令中设置，也可以在 .env 文件中设置。在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。npx rimraf node_modules 这个命令是在使用 Node.js 开发时，用于删除项目中的 node_modules 文件夹的命令。使用 Node.js 运行 Vite 的构建命令，并手动设置 Node.js 的老生代内存限制为 8 GB，以确保在构建大型项目时有足够的内存可用。

2024-11-01 15:56:30 1350

原创 Vite学习之环境变量

随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换，这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined。二、另外，Vite 执行时已经存在的环境变量有最高的优先级，不会被 .env 类文件覆盖。

2024-11-01 13:33:20 901

原创速通TypeScript

注意：编码者没有编写return指定函数返回值，所以logMessage函数是没有显式返回值的，但会有一个隐式返回值，是undefined，虽然函数返回类型为void，但也是可以接受undefined的，简单记：undefined是void可以接受的一种“空”。泛型允许我们在定义函数、类或接口时，使用类型参数来表示未指定的类型，这些参数在具体使用时，才被指定具体的类型，泛型能让同一段代码适用于多种类型，同时仍然保持类型的安全性。TS会根据我们的代码，进行类型推导，例如下面代码中的变量d，只能存储数字。

2024-10-16 19:45:36 1073

正则表达式30分钟入门教程

程序员每天该做的事

空空如也