如何将带link、priority属性的AngularJS自定义指令迁移到Angular

1. priority属性的处理方式 #

Angular没有提供与AngularJS priority直接对应的配置项，可按原使用场景替换：

• 若原逻辑通过priority控制同元素多指令的执行顺序：Angular默认按模板中指令的声明顺序执行，直接调整指令书写顺序即可满足90%以上的场景需求
• 若原高priority配合terminal实现逻辑拦截：迁移为Angular结构型指令，通过TemplateRef与ViewContainerRef控制渲染时机，天然具备优先执行的特性
• 若为表单验证、全局注入类的指令顺序要求：通过依赖注入的multi: true配置调整执行优先级即可。

2. link属性的迁移方案 #

AngularJS的link函数分为pre-link、post-link两类，对应Angular不同的生命周期能力：

• 原post-link中的DOM操作、子元素访问逻辑：迁移到组件/指令的ngAfterViewInit生命周期钩子中，配合@ViewChild/@ViewChildren获取目标元素或子组件引用，实现完全一致的效果
• 原pre-link中的输入属性预处理、提前初始化逻辑：迁移到ngOnInit钩子，或对应输入属性的set访问器中实现即可
• 原link中的DOM事件绑定、样式修改操作：建议用Angular的Renderer2API实现，避免直接操作DOM带来的跨平台兼容性问题
• 若原指令本身是无模板的属性型/结构型指令，无需强行迁移为组件：直接用Angular的@Directive装饰器定义指令，在对应生命周期中实现原link逻辑即可。

内容的提问来源于stack exchange，提问作者user2847339