随笔分类 -  Angular

Angular：表单设置动态校验规则（ngZorro示例）
摘要：# 背景 有时我们需要根据不同的条件，决定表单控件是否是必填的。 # 代码示例 ## HTML文件 ```HTML Name Nickname Nickname is required Check ``` ## TS文件 ``` typeScript import { Component, OnIn 阅读全文
posted @ 2023-08-23 23:29 胸怀丶若谷 阅读(474) 评论(0) 推荐(0)
Angular: 样式绑定
摘要：# 解决方案 使用`ngClass`和`ngStyle`可以进行样式的绑定。 ## ngStyle的使用 ngStyle 根据组件中的变量， isTextColorRed和fontSize的值来动态设置元素的颜色和字体大小 ```HTML This text has dynamic styles b 阅读全文
posted @ 2023-07-30 22:23 胸怀丶若谷 阅读(228) 评论(1) 推荐(0)
Angular：error TS2717: Subsequent property declarations must have the same type. Property 'contentRect' mu st be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.
摘要：# 解决方案 在`tsconfig.json`的`compilerOptions`选项中添加如下内容`"skipLibCheck": true`。 如下图所示 ![image](https://img2023.cnblogs.com/blog/1795938/202307/1795938-20230 阅读全文
posted @ 2023-07-30 21:26 胸怀丶若谷 阅读(153) 评论(0) 推荐(0)
Angular: 父子·组件传值
摘要：# 父传子 在子组件中，使用 @Input() 装饰器来声明输入属性。 ![image](https://img2023.cnblogs.com/blog/1795938/202307/1795938-20230724224106279-1481586138.png) ![image](https: 阅读全文
posted @ 2023-07-24 22:49 胸怀丶若谷 阅读(65) 评论(0) 推荐(0)
Angular: 点击一次按钮，增加一个元素
摘要：# 解决方案 ## 思路 1. 在组件的typesscript文件中，创建一个数组来存储每个按钮的信息 2. 在模板中使用 `*ngFor` 指令来循环渲染按钮列表 3. 在按钮事件的处理函数中，每次点击按钮时向按钮数组添加一个新的按钮信息 ## 实例 在组件的typescript代码中 ``` t 阅读全文
posted @ 2023-07-24 11:05 胸怀丶若谷 阅读(57) 评论(0) 推荐(0)
Angular：修改启动端口号
摘要：# 目标 修改预先设定的4200端口号，改为4100 # 解决方案 在启动命令中添加 `--port 4100`.参数 `--open`，会在启动时自动打开浏览器。 ``` ng serve --open --port 4100 ``` ![image](https://img2023.cnblog 阅读全文
posted @ 2023-07-22 09:54 胸怀丶若谷 阅读(115) 评论(0) 推荐(0)
Angular: Error: NG0100: ExpressionChangedAfterItHasBeenChecked
摘要：错误原因 当变更检测完成后又更改了表达式的值时，Angular就会抛出ExpressionChangedAfterItHasBeenCheckedError 错误，Angular只会在开发模式下抛出此错误 解决方案 方案一 将ngAfterViewInit中的表达式放入ngOnInit中 方案二 参 阅读全文
posted @ 2022-12-09 10:37 胸怀丶若谷 阅读(884) 评论(0) 推荐(0)
TypeScript:Type 'boolean' is not assignable to type 'never'.
摘要：问题原因 当我们声明一个空数组而不显示键入它并尝试向其中添加元素时，会发生该错误。 解决方案 声明数组类型即可 参考链接 https://bobbyhadz.com/blog/typescript-argument-type-not-assignable-parameter-type-never 阅读全文
posted @ 2022-12-06 09:53 胸怀丶若谷 阅读(851) 评论(0) 推荐(0)
Angular报错：Error: Unknown argument: spec
摘要：解决方案 使用--skip-tests代替 效果展示 可以看到spec.ts消失了 参考链接 https://stackoverflow.com/questions/62228834/angular-cli-command-issue-unknown-option-spec 阅读全文
posted @ 2022-11-14 13:13 胸怀丶若谷 阅读(322) 评论(0) 推荐(0)