Angular 4使用Renderer2/HostListener处理单击的外部事件

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

@Component({
  selector: 'app-example',
  template: `
    <div #container>
      <button (click)="toggleDropdown()">Toggle Dropdown</button>
      <div *ngIf="dropdownVisible" class="dropdown">
        Dropdown Content
      </div>
    </div>
  `,
  styles: [`
    .dropdown {
      position: absolute;
      top: 30px;
      left: 0;
      width: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
    }
  `]
})
export class ExampleComponent {
  dropdownVisible = false;

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

  toggleDropdown() {
    this.dropdownVisible = !this.dropdownVisible;
  }

  @HostListener('document:click', ['$event.target'])
  onClickOutside(target: any) {
    const clickedInside = this.elementRef.nativeElement.contains(target);
    if (!clickedInside) {
      this.dropdownVisible = false;
    }
  }
}