angular - 如何(模糊) 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

如果你想要一个像弹出窗口一样的“点击框外必须关闭框”那么你可以在文档上注册一个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
    }
}