Angular如何实现点击输入框开日历、仅点击日历外区域才关闭功能

核心逻辑为不再仅判断点击目标本身的类名，而是通过事件冒泡路径/节点包含关系，判断点击是否发生在「输入框、日历容器」范围内，只要在范围内就不触发关闭逻辑。

方案1：无需修改HTML，仅调整TS逻辑（推荐） #

通过event.composedPath()获取事件冒泡经过的所有DOM节点，遍历检查是否存在我们标记的类名，自动覆盖所有嵌套子元素：

@HostListener("document:click", ['$event'])   
clicked(event: MouseEvent) {
  const target = event.target as HTMLElement;
  // 获取事件冒泡完整路径，包含所有经过的父级节点
  const eventPath = event.composedPath() as HTMLElement[];
  // 检查路径中是否存在允许触发打开/不关闭的元素
  const isInValidArea = eventPath.some(el => {
    const className = el?.className || '';
    return className.includes('clickForOpenCalendar1') 
      || className.includes('clickForOpenCalendar2') 
      || className.includes('calendar');
  });
  if (isInValidArea) {
    // 点击在输入框或日历内部，执行打开逻辑
    const targetClass = target.className;
    if(targetClass.includes("clickForOpenCalendar1")) {
      this.showCalendar = calendarStatus.first;
    } else if(targetClass.includes("clickForOpenCalendar2")) {
      this.showCalendar = calendarStatus.second;
    }
  } else {
    // 点击在外部，关闭日历
    this.showCalendar = calendarStatus.hidden;
  }
}

优势：不需要修改现有HTML结构，仅需调整点击判断逻辑，无需给日历子元素加额外类名。

方案2：使用@ViewChild + Node.contains()（性能更优） #

如果项目对性能要求更高，可以通过模板引用直接获取DOM节点，用原生contains方法判断包含关系：

修改父组件HTML，添加模板引用 #

<!-- 日期起始输入框容器 -->
<div #dateFromInput id="dateFrom">
    <svg viewBox="0 0 24 24"><path d="M22.502 13.5v8.25a.75.75 0 0 1-.75.75h-19.5a.75.75 0 0 1-.75-.75V5.25a.75.75 0 0 1 .75-.75h19.5a.75.75 0 0 1 .75.75v8.25zm1.5 0V5.25A2.25 2.25 0 0 0 21.752 3h-19.5a2.25 2.25 0 0 0-2.25 2.25v16.5A2.25 2.25 0 0 0 2.252 24h19.5a2.25 2.25 0 0 0 2.25-2.25V13.5zm-23.25-3h22.5a.75.75 0 0 0 0-1.5H.752a.75.75 0 0 0 0 1.5zM7.502 6V.75a.75.75 0 0 0-1.5 0V6a.75.75 0 0 0 1.5 0zm10.5 0V.75a.75.75 0 0 0-1.5 0V6a.75.75 0 0 0 1.5 0z"></path></svg>
    <input class="clickForOpenCalendar1" autocomplete="off" readonly type="text" value="{{fromDate | date: 'dd.MM.yy'}}">
</div>
<!-- 日期结束输入框容器 -->
<div #dateToInput id="dateTo">
    <svg viewBox="0 0 24 24"><path d="M22.502 13.5v8.25a.75.75 0 0 1-.75.75h-19.5a.75.75 0 0 1-.75-.75V5.25a.75.75 0 0 1 .75-.75h19.5a.75.75 0 0 1 .75.75v8.25zm1.5 0V5.25A2.25 2.25 0 0 0 21.752 3h-19.5a2.25 2.25 0 0 0-2.25 2.25v16.5A2.25 2.25 0 0 0 2.252 24h19.5a2.25 2.25 0 0 0 2.25-2.25V13.5zm-23.25-3h22.5a.75.75 0 0 0 0-1.5H.752a.75.75 0 0 0 0 1.5zM7.502 6V.75a.75.75 0 0 0-1.5 0V6a.75.75 0 0 0 1.5 0zm10.5 0V.75a.75.75 0 0 0-1.5 0V6a.75.75 0 0 0 1.5 0z"></path></svg>
    <input class="clickForOpenCalendar2" autocomplete="off" readonly type="text" value="{{toDate | date: 'dd.MM.yy'}}">
</div>
<!-- 日历容器 -->
<div #calendarContainer class="calendar" [ngClass]="{visibleCalendar: showCalendar==myEnum.first || showCalendar==myEnum.second}">
    <app-calendar
      (finalFromDate)="calendarFrom($event)"
      (finalToDate)="calendarTo($event)"
    ></app-calendar>
</div>

修改父组件TS逻辑 #

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

// 类内部声明元素引用
@ViewChild('dateFromInput') dateFromInput: ElementRef<HTMLElement>;
@ViewChild('dateToInput') dateToInput: ElementRef<HTMLElement>;
@ViewChild('calendarContainer') calendarContainer: ElementRef<HTMLElement>;

@HostListener("document:click", ['$event'])   
clicked(event: MouseEvent) {
  const target = event.target as HTMLElement;
  // 判断点击是否在三个允许的节点内部
  const isInValidArea = 
    this.dateFromInput.nativeElement.contains(target)
    || this.dateToInput.nativeElement.contains(target)
    || this.calendarContainer.nativeElement.contains(target);

  if (isInValidArea) {
    const targetClass = target.className;
    if(targetClass.includes("clickForOpenCalendar1")) {
      this.showCalendar = calendarStatus.first;
    } else if(targetClass.includes("clickForOpenCalendar2")) {
      this.showCalendar = calendarStatus.second;
    }
  } else {
    this.showCalendar = calendarStatus.hidden;
  }
}

优势：不需要遍历事件路径，直接用原生DOM方法判断，性能更高，适合复杂嵌套的组件场景。

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