Angular 5：如何监听用户点击目标元素外部的事件

Got it, let's nail this down! You want a streamlined, intuitive way to specify which elements should not trigger the outside-click event for your directive. Here's a solution that lets you pass targets with super concise syntax—whether you're using template references, CSS selectors, or direct element references.

Step 1: Update the Directive to Accept Flexible Inputs #

First, tweak your ClickOutsideTargets directive to handle mixed target types and automatically resolve them to actual DOM elements. This makes the input syntax way cleaner:

import { Directive, Input, Output, EventEmitter, ElementRef, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: '[clickOutsideTargets]'
})
export class ClickOutsideTargetsDirective implements OnInit {
  // Accept array of targets: template refs, CSS selectors, or ElementRef
  @Input('clickOutsideTargets') targets: (HTMLElement | ElementRef | string)[] = [];
  @Output() outsideClick = new EventEmitter<void>();

  private resolvedTargets: HTMLElement[] = [];

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    // Resolve all targets to valid HTMLElements
    this.resolvedTargets = this.targets.map(target => {
      if (typeof target === 'string') {
        // Treat as CSS selector
        return document.querySelector(target) as HTMLElement;
      } else if (target instanceof ElementRef) {
        // Extract native element from ElementRef
        return target.nativeElement;
      } else {
        // Already an HTMLElement (from template ref)
        return target;
      }
    }).filter(el => el !== null); // Filter out invalid/unfound elements
  }

  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent): void {
    const clickedElement = event.target as HTMLElement;
    
    // Check if click is inside any target or the directive's host element
    const isInsideTarget = this.resolvedTargets.some(target => target.contains(clickedElement));
    const isInsideHost = this.el.nativeElement.contains(clickedElement);

    if (!isInsideTarget && !isInsideHost) {
      this.outsideClick.emit();
    }
  }
}

Step 2: Use Concise Syntax in Your Template #

Now you can pass targets in a super clean way—mix and match template references and CSS selectors directly in the template:

<!-- Define template references -->
<button #menuTrigger>Open Menu</button>
<div #dropdownMenu class="dropdown">Dropdown content...</div>

<!-- Directive usage with concise target array -->
<div 
  clickOutsideTargets="[menuTrigger, dropdownMenu, '.modal-overlay']"
  (outsideClick)="closeMenu()"
>
  Main content area
</div>

If you need dynamic targets (e.g., targets that change based on component state), bind to a component property instead:

// In your component class
targetElements = [this.menuTrigger, '.modal-overlay'];

<div 
  [clickOutsideTargets]="targetElements"
  (outsideClick)="handleOutsideClick()"
>
  Dynamic content area
</div>

Why This Works So Well #

• Flexible: Supports every common way to reference elements in Angular templates.
• Concise: No verbose boilerplate—just pass the reference or selector directly.
• Robust: Automatically filters out invalid targets so your directive doesn't break if a selector doesn't match anything.

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