javascript - 如何使用 ElementRef 关闭外部点击 Angular 4 上的下拉菜单

Question

我提到了this other walk through我无法准确理解它是如何工作的。我已将其添加到我的 ts 文件中:

@Component({
  host: {
   '(document:click)': 'onOutsideClick($event)',
  },
})

class SomeComponent() {
  constructor(private _eref: ElementRef) { }

  onOutsideClick(event) {
    console.log('click')
    if(!this._eref.nativeElement.contains(event.target)){
      this.companyResults = null;
  }
}

并希望将其应用到 HTML 中的此下拉列表中，当有人在外部单击时，会将 ul 数据设置为 null。

<input id="positionCompanyName" name="companyName_{{i}}" class="search-input"
     [(ngModel)]="candidate.positions[i].company_name"
     (keyup)="$event.target.value && searchCompany$.next($event.target.value)">
       <ul class="search-dropdown-ul" *ngIf="companyResults && positionIndex === i">
         <a class="search-dropdown-div" *ngFor="let companyResult of companyResults" (click)="addCompany(companyResult, i)">             
          <li class="search-dropdown-li">
            {{ companyResult.name } 
           </li>
          </a>
        </ul>

Answer 1

ElementRef(在构造函数中)为您提供对组件本身的 native 元素(DOM 元素)的引用。

  if(!this._eref.nativeElement.contains(event.target)){
  }

这部分检查您是否单击了组件的任何部分，这不是您想要的。您可以使用 @ViewChild 检查是否单击了 search-dropdown-ul因此，在 HTML 中，您声明某物是 ViewChild

<ul #list class="search-dropdown-ul" *ngIf="companyResults && positionIndex === i">

注意#list。现在在组件中，您可以通过说来引用它

 @ViewChild('list') list: ElementRef;

最后，您会看到它是否被点击:

if(!this.list.nativeElement.contains(event.target)){
  //do your thing here
}