Angular中通过appSelectable指令控制addTask点击事件的禁用与恢复

方法1：通过事件拦截阻止点击触发 #

在appSelectable指令内监听宿主元素的点击事件，当满足isSelecting且鼠标处于元素区域时，直接阻止事件的传播与默认行为，从而中断addTask的执行。

修改后的指令代码： #

import { Directive, ElementRef, HostListener } from '@angular/core';
import { BotService } from 'path-to-your-bot-service';

@Directive({
  selector: '[appSelectable]'
})
export class SelectableDirective {
  private isMouseInside = false;

  constructor(
    private elementRef: ElementRef,
    private botService: BotService
  ) {}

  @HostListener('mouseover')
  onMouseOver() {
    if (this.botService.isSelecting) {
      this.isMouseInside = true;
    }
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.isMouseInside = false;
  }

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    // 处于选择模式且鼠标在元素内时，阻断点击事件
    if (this.botService.isSelecting && this.isMouseInside) {
      event.stopPropagation();
      event.preventDefault();
    }
  }
}

核心逻辑：

• 用isMouseInside变量跟踪鼠标是否处于宿主元素范围内
• 监听宿主的click事件，通过stopPropagation()和preventDefault()直接阻断Angular事件绑定的执行链
• 完全在指令内实现逻辑，无需修改组件或模板代码

方法2：通过组件状态控制点击权限 #

如果需要更灵活的逻辑扩展，可以在组件中添加标志位，由指令修改该状态，再在addTask方法中判断是否执行核心逻辑。

步骤1：组件中添加控制标志 #

// 你的Todo组件类
export class TodoComponent {
  isAddTaskDisabled = false;

  addTask(taskName: string) {
    // 状态为禁用时直接返回，不执行后续逻辑
    if (this.isAddTaskDisabled) return;
    // 原addTask业务逻辑
  }
}

步骤2：修改指令注入组件实例 #

import { Directive, ElementRef, HostListener, Inject } from '@angular/core';
import { BotService } from 'path-to-your-bot-service';
import { TodoComponent } from 'path-to-your-todo-component';

@Directive({
  selector: '[appSelectable]'
})
export class SelectableDirective {
  constructor(
    private elementRef: ElementRef,
    private botService: BotService,
    @Inject(TodoComponent) private todoComponent: TodoComponent
  ) {}

  @HostListener('mouseover')
  onMouseOver() {
    if (this.botService.isSelecting) {
      this.todoComponent.isAddTaskDisabled = true;
    }
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.todoComponent.isAddTaskDisabled = false;
  }
}

核心逻辑：

• 指令通过注入组件实例，直接修改组件内的控制标志
• 组件的addTask方法根据标志位决定是否执行核心逻辑
• 适合需要在组件内做更多关联逻辑判断的场景

为什么你之前的方法无效？ #

Angular的模板事件绑定(click)并非挂载在DOM元素的click属性上，而是通过Angular自身的事件系统处理回调。直接修改DOM的click属性，无法影响Angular绑定的事件执行链，因此这种方式不会生效。

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