SuperAPI AI 工具集

angular-directives

前端与建站

查看项目

更新于 10-16 09:47

技能介绍

用途:该技能面向 Angular 指令开发,涵盖 Angular 21(2025)中的自定义指令、属性指令、结构指令以及指令组合(directive composition)。

主要能力与版本要点:资料列出若干新版 API 变化——使用 hostDirectives 进行指令组合;在指令中使用 input() 实现信号输入;所有指令可独立(standalone);控制流语法 @if、@for、@switch 取代 *ngIf、*ngFor。

实践用法示例:创建属性指令时用 @Directive 与 @Input 设置宿主元素样式,构造中注入 ElementRef 与 Renderer2;用 @Input 和 @Output 实现指令通信,并配合 @HostListener 监听事件;结构指令通过注入 TemplateRef 与 ViewContainerRef 动态创建或清空嵌入视图;复杂结构逻辑使用 ViewContainerRef;用 hostDirectives 将指令组合进组件并可映射 inputs;现代指令可标注 standalone: true;信号值可用 input('') 定义并在生命周期中读取;属性绑定可用 @HostBinding 或 ElementRef 处理。

适用场景:为 Angular 应用编写可复用 DOM 行为、自定义结构逻辑、组件宿主指令组合与响应式指令属性。

限制与注意事项:资料建议保持指令单一职责、使用具描述性的选择器;文中未提供收费、平台、完整安装命令或版本兼容性等细节,相关事实暂未提供。