Javascript 如何使用ElementRef关闭外部单击角4上的下拉列表

我提到过，但不能确切理解它是如何工作的。我已将此添加到我的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>

{{companyResult.name}

ElementRef（在构造函数中）提供对组件本身的本机元素（DOM元素）的引用

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

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

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

最后，你可以看到它是否被点击：

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

---

问题是什么？你不明白它的功能是什么或不起作用？在阅读文档后，我不确定它是如何工作的。我想将它绑定到搜索下拉列表ulIt works！但我收到一个控制台错误，说无法读取未定义的nativeElement。我必须调用#list其他地方吗？您可以检查吗？@ViewChild是一个decoror、 这意味着Angular将用另一个类包装您的typescript类，该类知道如何“连接”该视图子级。您得到的错误是因为*ngIf=“companyResults&&positionIndex==i”ngIf将在条件为true时将元素添加到DOM中，否则将删除它们。元素#列表将被销毁，您将检查是否单击了它，并且该元素不存在。若要处理此问题，请添加到构造函数中，并在条件设置为显示#列表后，从changeDetectorRef调用detectChanges（）。

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