如何在Angular中设置指令优先级？Angular4如何实现类AngularJS的优先级配置？

嘿，我来帮你理清这两个关于Angular指令优先级的问题——毕竟Angular和AngularJS在这一块的设计差异还挺大的，咱们一步步说：

首先得明确：Angular（从2.x开始，包括你问的Angular4）已经移除了AngularJS里的priority属性，没法直接通过配置数值来指定指令执行顺序。不过Angular本身有一套默认的执行规则，也有手动控制的方式：

1. 区分指令类型的默认顺序 #

Angular里的指令分两类，它们的执行优先级是固定的：

• 结构型指令（比如*ngIf、*ngFor、自定义的带*的结构指令）会优先执行，因为它们需要修改DOM结构（添加/移除元素），属性型指令是在已存在的DOM元素上做操作，所以会滞后。

2. 同类型指令的执行顺序 #

如果是同一类型的指令（比如两个属性型指令），默认遵循元素上的声明顺序：

• 举个例子：<div appHighlight appResize></div>，appHighlight的初始化钩子（比如ngOnInit）会比appResize先触发。
• 结构型指令同理，但要注意*是语法糖，比如<div *ngIf="show" *ngFor="let item of list">会被解析成嵌套的模板结构，这时候*ngIf的优先级更高，因为它在外层控制着整个元素的存在。

3. 通过依赖注入控制顺序 #

如果指令之间有依赖关系，Angular会先实例化被依赖的指令，再实例化依赖它的指令。比如：

@Directive({ selector: '[appBase]' })
export class BaseDirective {
  baseValue = 'hello';
}

@Directive({ selector: '[appDependent]' })
export class DependentDirective {
  constructor(private baseDir: BaseDirective) {
    // BaseDirective已经被实例化，这里可以直接用baseValue
    console.log(this.baseDir.baseValue);
  }
}

这种情况下，BaseDirective会优先于DependentDirective初始化。

如果你的业务场景必须像AngularJS那样，通过配置数值来动态控制指令执行顺序，可以通过自定义优先级标识+协调服务来模拟：

步骤1：给指令添加静态优先级属性 #

给每个需要控制优先级的指令添加一个静态的priority属性，数值越大优先级越高：

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[appHighPriority]' })
export class HighPriorityDirective {
  static priority = 10; // 高优先级
  constructor(private el: ElementRef) {}

  // 把指令的核心逻辑抽成一个单独的方法，方便后续调用
  runLogic() {
    this.el.nativeElement.style.color = 'crimson';
  }
}

@Directive({ selector: '[appMediumPriority]' })
export class MediumPriorityDirective {
  static priority = 7; // 中等优先级
  constructor(private el: ElementRef) {}

  runLogic() {
    this.el.nativeElement.style.fontWeight = 'bold';
  }
}

@Directive({ selector: '[appLowPriority]' })
export class LowPriorityDirective {
  static priority = 3; // 低优先级
  constructor(private el: ElementRef) {}

  runLogic() {
    this.el.nativeElement.style.fontSize = '1.2rem';
  }
}

步骤2：创建协调服务来管理指令顺序 #

这个服务负责收集指令、按优先级排序，然后按顺序执行核心逻辑：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DirectivePriorityManager {
  private elementDirectives = new Map<HTMLElement, Array<any>>();

  // 注册指令，关联到对应的DOM元素
  registerDirective(element: HTMLElement, directive: any) {
    if (!this.elementDirectives.has(element)) {
      this.elementDirectives.set(element, []);
    }
    this.elementDirectives.get(element)!.push({
      priority: (directive.constructor as any).priority,
      logic: directive.runLogic.bind(directive)
    });
    // 按优先级从高到低排序
    this.elementDirectives.get(element)!.sort((a, b) => b.priority - a.priority);
  }

  // 执行指定元素上的所有指令逻辑
  executeDirectives(element: HTMLElement) {
    const directives = this.elementDirectives.get(element);
    if (directives) {
      directives.forEach(dir => dir.logic());
    }
  }
}

步骤3：在指令中注册并触发执行 #

修改指令，在合适的钩子（比如ngAfterViewInit）里注册到服务，然后触发执行：

// 以HighPriorityDirective为例，其他指令同理修改
@Directive({ selector: '[appHighPriority]' })
export class HighPriorityDirective {
  static priority = 10;
  constructor(
    private el: ElementRef,
    private priorityManager: DirectivePriorityManager
  ) {}

  ngAfterViewInit() {
    this.priorityManager.registerDirective(this.el.nativeElement, this);
    // 这里可以在父组件统一触发，或者单元素触发
    this.priorityManager.executeDirectives(this.el.nativeElement);
  }

  runLogic() {
    this.el.nativeElement.style.color = 'crimson';
  }
}

注意事项 #

• 这种模拟方式适合复杂场景，比如动态添加指令、需要动态调整优先级的情况；如果只是简单的顺序控制，优先调整指令在元素上的声明顺序，这是Angular推荐的最简单方式。
• 要注意Angular的生命周期钩子时机，避免重复执行逻辑，可以在服务里添加标记，确保每个元素只执行一次排序后的逻辑。

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