如何在angular中(模糊)元素，除非它在子元素中单击

Question

如何使用模糊，但不激活模糊时，它是单击子元素？我不能在li元素上触发单击事件。

<div class="select-menu">
  <div class="selected" tabindex="0" (blur)="showList = false" (click)="showList = !showList"><span>{{selected}}</span></div>
  <ng-container *ngIf="showList">
    <ul>
      <li *ngFor="let item of list; let i=index" (click)="selectItem(item, i)">
        <span>{{item}}</span>
      </li>
    </ul>
  </ng-container>
</div>

Answer 1

如果你想要一个像弹出窗口一样的“点击外部框必须关闭框”，那么你可以在document上注册一个click侦听器，并确定点击是否在你的框区域之外：

export class BoxComponent {

    openedBox = false;

    @ViewChild('box', { read: ElementRef }) boxRef: ElementRef;

    @HostListener('document:click', ['$event'])
    clickOutsideCurrentPopup(event: Event) {
        if (this.openedBox) {
            // if clicked outside only
            if (!this.boxRef.nativeElement.contains(event.target)) {
                this.openedBox = false; // or do whatever you want to close your box
            }
        }
        // else is already closed, do nothing
    }
}