随笔分类 -  Angular

Angular - forwardRef() 解决循环引用问题的原理
摘要：forwardRef() 是Angular提供的一个工具函数，用于解决组件/指令/服务之间的循环依赖问题。让我们深入了解一下它的工作原理和应用场景。 循环引用问题 在Angular中，当两个类相互引用时会产生循环依赖： // A 依赖 B class A { constructor(@Inject( 阅读全文
posted @ 2025-08-13 18:24 箫笛 阅读(21) 评论(0) 推荐(0)
Angular - ngModel指令与双向绑定区别
摘要：在 Angular 中，ngModel 指令和 ngModel 的双向绑定是密切相关的概念，但它们的实现方式和用途存在关键区别： 1. ngModel 指令（基础功能） 作用：提供表单控件的单向数据绑定和状态跟踪 语法：[ngModel]（属性绑定） 数据流：单向（组件 → 视图） 主要功能： 将组 阅读全文
posted @ 2025-08-04 09:59 箫笛 阅读(261) 评论(0) 推荐(0)
Angular - style属性绑定与NgStyle指令的使用区别
摘要：在 Angular 中，[style] 属性绑定和 NgStyle 指令都用于动态设置元素样式，但它们在使用方式和功能上有明显区别： 1. [style] 属性绑定（推荐方式） <!-- 单个样式属性 --> <div [style.backgroundColor]="isActive ? 'gre 阅读全文
posted @ 2025-08-01 16:49 箫笛 阅读(51) 评论(0) 推荐(0)
Angular - angular组件转自定义元素方法及应用
摘要：Angular 组件转为自定义元素的方法 Angular 通过 @angular/elements 包提供了将组件转换为 自定义元素（Custom Elements） 的能力（遵循 Web Components 标准）。以下是详细步骤： 1. 安装依赖 ng add @angular/element 阅读全文
posted @ 2025-07-25 18:43 箫笛 阅读(258) 评论(0) 推荐(0)
Angular - 视图查询与内容查询区别及应用
摘要：在Angular中，视图查询（View Query） 和 内容查询（Content Query） 都是用于获取子元素或组件的机制，但它们的查询范围和应用场景有本质区别。以下是详细对比： 核心区别 特性 视图查询（@ViewChild / @ViewChildren） 内容查询（@ContentChi 阅读全文
posted @ 2025-07-25 16:23 箫笛 阅读(20) 评论(0) 推荐(0)
Angular - afterRender与afterNextRender区别及应用
摘要：在 Angular 中，afterRender 和 afterNextRender 都是用于在组件渲染后执行代码的渲染钩子（Render Hooks），但它们在触发时机和用途上有明显区别： 1. afterNextRender 触发时机：仅在下一次变更检测完成且 DOM 更新后执行一次。 应用场景： 阅读全文
posted @ 2025-07-25 14:55 箫笛 阅读(52) 评论(0) 推荐(0)
Angular - 组件生命周期函数详解
摘要：Angular 的生命周期函数是组件和指令在创建、更新和销毁过程中自动调用的钩子方法，用于在关键阶段执行自定义逻辑。以下是核心生命周期函数及其应用场景（按调用顺序排列）： 1. ngOnChanges() 调用时机： 当输入属性（@Input 绑定）的值发生变化时调用（首次调用在 ngOnInit 阅读全文
posted @ 2025-07-25 14:32 箫笛 阅读(96) 评论(0) 推荐(0)
Angular - 宿主绑定与实例绑定区别及应用场景
摘要：在Angular中，宿主绑定（Host Binding） 和 实例绑定（Instance Binding） 是两种不同的数据绑定机制，主要区别在于作用对象和实现方式。以下是详细对比和应用场景分析： 1. 宿主绑定（Host Binding） 定义 通过 @HostBinding() 装饰器将 组件/ 阅读全文
posted @ 2025-07-25 10:54 箫笛 阅读(25) 评论(0) 推荐(0)
Angular - @Input装饰器通过getter和setter实现输入属性的场景
摘要：在 Angular 中，@Input 的 getter 和 setter 用于创建带有自定义逻辑的输入属性，它们允许你在属性值被读取或修改时执行特定操作。以下是详细说明： 核心作用 拦截输入值的变化：当父组件传递的数据发生变化时触发自定义逻辑 添加业务逻辑：在值被设置或读取时执行额外操作 数据验证/ 阅读全文
posted @ 2025-07-23 23:19 箫笛 阅读(12) 评论(0) 推荐(0)
Angular - 组件视图封装模式选择指南
摘要：Angular 组件的视图封装模式主要有三种，它们决定了组件样式的作用域规则和如何影响 DOM： ViewEncapsulation.Emulated (模拟 - 默认值) 工作原理： Angular 会为组件的宿主元素添加一个唯一的属性（如 _nghost-abc123），并为组件模板内的每个元素 阅读全文
posted @ 2025-07-23 16:03 箫笛 阅读(33) 评论(0) 推荐(0)
Angular - 组件选择器类型及选择策略
摘要：在Angular中，组件选择器（selector） 用于在模板中标识和插入组件，支持多种CSS选择器形式。以下是详细分类和选择建议： 1. 元素选择器（Element Selector） 形式：selector: 'app-component' 使用场景： 作为自定义HTML标签使用，是最常见的形式 阅读全文
posted @ 2025-07-23 15:26 箫笛 阅读(47) 评论(0) 推荐(0)