用途:在 Angular v20+ 中创建自定义指令,用于可复用的 DOM 操作与行为扩展,包括修改元素外观或行为的属性指令,以及用于门户、浮层、动态插入点等 DOM 操作的结构型指令。条件与循环建议使用原生 @if、@for、@switch。
主要能力:属性指令可注入 ElementRef,并通过 input、effect 响应输入修改样式;推荐使用 host 属性而非 @HostBinding/@HostListener 绑定事件、属性与类;支持类与样式操作、文档级点击外部检测、键盘快捷键。结构型指令提供 Portal(将内容渲染到其它 DOM 位置)、LazyRender(条件首次为真时一次性渲染)、带上下文的 TemplateOutlet。hostDirectives 可将 Focusable、Disableable 等可复用行为组合到组件上,并可通过 inputs/outputs 暴露输入与输出;Directive Composition API 可组合 Ripple、Elevation 等多个行为。
使用方式:以 @Directive 装饰器配合 selector 定义指令,通过 inject 获取 ElementRef、TemplateRef、ViewContainerRef 等;输入使用 input()(可用 alias 匹配选择器,required 标记必填),输出使用 output();模板中按选择器使用,如 appTooltip、appShortcut、*appPortal、*appLazyRender。
适用场景:需要跨组件复用 DOM 行为、封装浮层/门户、实现快捷键与点击外部、延迟渲染重型内容、组合多种交互行为时。
限制:面向 Angular v20+;资料未提供安装命令、版本兼容细节、性能数据或收费信息;位置计算等部分实现以注释示意,未给出完整代码;高级模式另见 references/directive-patterns.md,资料未提供其内容。