Angular 5中通过renderer.listen动态实现自定义下拉框外部点击隐藏

Got it, let's wrap up your custom dropdown's click-outside functionality using Renderer2—you’re already making the right call avoiding HostListener to skip redundant listeners across dropdown instances. Here’s how to polish the logic:

Step 1: Inject Required Dependencies #

First, add Renderer2 (for dynamic listener management) and ElementRef (to reference your dropdown's DOM element) to your component constructor:

import { Component, Renderer2, ElementRef, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.css']
})
export class CustomDropdownComponent implements OnDestroy {
  isOpened = false;
  private clickOutsideCleanup?: () => void; // Stores the listener removal function

  constructor(private renderer: Renderer2, private el: ElementRef) {}

Step 2: Build Out the Click-Outside Handler Logic #

Update your clickOutsideHandler to attach the document listener, and add a helper to detect clicks outside the component:

clickOutsideHandler(): void {
  // Open the dropdown first
  this.isOpened = true;

  // Attach document click listener, save the cleanup function
  this.clickOutsideCleanup = this.renderer.listen(
    'document',
    'click',
    (event: MouseEvent) => this.handleExternalClick(event)
  );
}

private handleExternalClick(event: MouseEvent): void {
  // Check if the click target is NOT inside the dropdown component
  const isClickInsideDropdown = this.el.nativeElement.contains(event.target);
  
  if (!isClickInsideDropdown) {
    // Close the dropdown
    this.isOpened = false;
    // Remove the listener since we don't need it anymore
    this.clickOutsideCleanup?.();
  }
}

Step 3: Refine the Input Click Handler #

Tweak your existing onClickInput to handle both opening and closing, plus cleanup:

onClickInput(): void {
  if (this.isOpened) {
    // Close dropdown and clean up the listener
    this.isOpened = false;
    this.clickOutsideCleanup?.();
    return;
  }
  // Open dropdown and attach the external click listener
  this.clickOutsideHandler();
}

Step 4: Clean Up on Component Destruction #

Always remove active listeners when the component is destroyed to prevent memory leaks:

ngOnDestroy(): void {
  // Ensure we clean up the listener if it's still active
  this.clickOutsideCleanup?.();
}

Key Notes #

• We only attach the document listener when the dropdown opens, and remove it immediately when it closes (either via input click or external click) to avoid unnecessary event handlers.
• ElementRef.nativeElement.contains() lets us reliably check if the click originated inside the dropdown—if not, we close and clean up.
• Storing the cleanup function from renderer.listen() ensures we can properly remove the listener whenever needed, no leftover handlers hanging around.

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