Как использовать ElementRef, чтобы закрыть выпадающий список при внешнем щелчке 4

Question

Я упоминал об этой другой прогулке через и не могу точно понять, как она работает.Я добавил это в свой файл 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, равное нулю, при щелчке снаружи.

<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 (в конструкторе) дает ссылку на собственный элемент (элемент DOM) самого компонента.

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

Эта часть проверяет, щелкнули ли вы по какой-либо части компонента, и этоне то, что вы хотите.Вы можете проверить, нажали ли вы на search-dropdown-ul, используя @ ViewChild Итак, в 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
}