Angular两个同宿主指令互相检测存在时如何避免依赖注入循环问题

核心思路是打破两个指令的直接依赖链路，避免静态编译阶段检测到循环引用，以下是三种可落地的实现方案：

方案1：抽象接口+注入令牌解耦（最推荐） #

通过抽象接口和注入令牌做中间层，让两个指令只依赖抽象，不直接依赖对方的实体类，从根源消除循环依赖。

1. 首先定义独立的抽象接口和注入令牌，不需要依赖任何指令文件：

// 可勾选指令抽象文件 checkable.interface.ts
export interface ICheckableDirective {
  isCheckEnabled: boolean;
  disableCheckWhenDragging(): void;
}
export const CHECKABLE_DIRECTIVE = new InjectionToken<ICheckableDirective>('CHECKABLE_DIRECTIVE');

// 可拖拽指令抽象文件 draggable.interface.ts
export interface IDraggableDirective {
  isDragProcessing: boolean;
}
export const DRAGGABLE_DIRECTIVE = new InjectionToken<IDraggableDirective>('DRAGGABLE_DIRECTIVE');

2. 在指令中注册自己到对应令牌，同时注入对方的令牌即可：

// card-is-checkable.directive.ts
@Directive({
  selector: '[appCardIsCheckable]',
  providers: [
    { provide: CHECKABLE_DIRECTIVE, useExisting: CardIsCheckableDirective }
  ]
})
export class CardIsCheckableDirective implements ICheckableDirective {
  isCheckEnabled = true;
  disableCheckWhenDragging() {
    this.isCheckEnabled = false;
  }

  constructor(
    @Optional() @Host() @Inject(DRAGGABLE_DIRECTIVE) public draggable?: IDraggableDirective
  ) {}

  ngOnInit() {
    if (this.draggable) {
      // 存在拖拽指令时调整自身逻辑
      this.disableCheckWhenDragging();
    }
  }
}

可拖拽指令按照相同的方式注册自身、注入CHECKABLE_DIRECTIVE令牌即可，不会触发循环依赖。

方案2：运行时动态获取实例（改造成本最低） #

不需要额外维护抽象层，仅在构造函数注入通用注入器，运行时再动态获取同宿主的其他指令实例，绕过静态依赖检测：

// card-is-draggable.directive.ts
@Directive({
  selector: '[appCardIsDraggable]'
})
export class CardIsDraggableDirective {
  private checkable?: CardIsCheckableDirective;

  constructor(private injector: Injector) {}

  ngOnInit() {
    // 运行时动态获取同宿主的可勾选指令实例
    this.checkable = this.injector.get(CardIsCheckableDirective, null, { host: true }) as CardIsCheckableDirective;
    if (this.checkable) {
      // 存在勾选指令时调整自身逻辑
    }
  }
}

方案3：共享中介服务（适合多指令扩展场景） #

如果后续还会新增更多卡片功能指令，可以用绑定在卡片组件上的共享服务做注册中心，所有指令都仅依赖这个中介服务：

1. 定义中介服务：

@Injectable()
export class CardDirectiveManager {
  private directiveMap = new Map<string, any>();

  register(type: 'checkable' | 'draggable' | string, instance: any) {
    this.directiveMap.set(type, instance);
  }

  get<T>(type: string): T | undefined {
    return this.directiveMap.get(type) as T;
  }
}

2. 在app-card组件的providers中注册服务，保证同一张卡片的所有指令共享同一个服务实例：

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  providers: [CardDirectiveManager]
})
export class AppCardComponent {}

3. 指令中注入服务，初始化时注册自身、查询其他指令：

// card-is-checkable.directive.ts
constructor(private manager: CardDirectiveManager) {}

ngOnInit() {
  this.manager.register('checkable', this);
  const draggable = this.manager.get<CardIsDraggableDirective>('draggable');
  if (draggable) {
    // 调整自身逻辑
  }
}

内容的提问来源于stack exchange，提问作者marked-down