Angular点击外部关闭编辑窗口异常问题求助

你的问题根源很明确：指令被绑定在了整个.tasks容器上，导致点击该容器内的任何区域（包括其他任务项、容器空白处）都会被isInside方法判定为「内部点击」，不会触发clickedOutside事件。你需要将指令绑定到单个编辑弹窗上，而非整个任务列表容器。

1. 核心修改：调整指令绑定位置 #

将appClickedOutside从.tasks容器移到每个.editingTask元素上，并直接绑定到对应索引的关闭逻辑：

<!-- 移除.tasks容器上的指令 -->
<div class="tasks">
    <div *ngFor="let task of tasksArray; let idx = index" class="task">
        <!-- 原有任务内容不变 -->
        <div class="editingTask" *ngIf="showMoreArray[idx]" 
             appClickedOutside 
             (clickedOutside)="showMoreArray[idx] = false">
            <!-- 原有编辑窗口内容不变 -->
        </div>
    </div>
</div>

2. 指令优化（可选但更严谨） #

原指令的isInside方法可以补充空值判断，避免潜在报错；同时用takeUntil替代手动取消订阅，更符合Angular最佳实践：

import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Directive, ElementRef, EventEmitter, Inject, OnDestroy, Output } from '@angular/core';
import { Subject, filter, fromEvent, takeUntil } from 'rxjs';

@Directive({
  selector: '[appClickedOutside]'
})
export class ClickedOutsideDirective implements AfterViewInit, OnDestroy   {
  @Output() public clickedOutside = new EventEmitter<void>();
  private destroy$ = new Subject<void>();

  constructor(private element: ElementRef, @Inject(DOCUMENT) private document: Document) { }
  
  ngAfterViewInit(): void {
    fromEvent(this.document, 'click').pipe(
      filter((event) => !this.isInside(event?.target as HTMLElement)),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.clickedOutside.emit();
    })
  }
  
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
  
  isInside(elementToCheck: HTMLElement | null): boolean {
    if (!elementToCheck) return false;
    return elementToCheck === this.element.nativeElement || this.element.nativeElement.contains(elementToCheck);
  }
}

3. 可选：保留「点击页面外部关闭所有编辑框」功能 #

如果需要点击页面最外层区域（如body）时关闭所有编辑框，可以在组件最外层容器上额外绑定指令：

<div class="todo-root-container" appClickedOutside (clickedOutside)="closeEditing()">
    <!-- 原有表单、任务列表等所有内容 -->
</div>

修改完成后，点击单个编辑窗口外部（包括其他任务、表单区域）会关闭对应编辑框，点击页面最外层外部则关闭所有编辑框，完全符合预期逻辑。

内容的提问来源于stack exchange，提问作者Влад Грабовський