点击框外

Question

我有一个问题，我做了一个指令，当我在一个方框外面点击时隐藏我的方框。但它也适用于另一方。这意味着当盒子被隐藏时，我点击它显示我的盒子的某个地方。我无法解决它..任何想法有什么不对？

HTML：     问题是输入框位于emClickOutsideSearchBox指令

之外

<div emClickOutsideSearchBox (clickOutsideSearchBox)="hideBoxMainSearch()" >
                  <input type="search" class="main-search width-searcher" (click)="toggleDropDown()" placeholder="Search..." formControlName="query" name="query" />
         <div *ngIf='showDropDown' class="state-container-dropdown">
          <div *ngFor="let event of events">
             <div class="founded-event">
                   <p>{{event.name}}</p>
             </div>
         </div>
       </div>
   </div>

打字稿：

showDropDown = false;



  toggleDropDown() {
  this.showDropDown = true;

}
hideBoxMainSearch() {
  if(this.showDropDown == true){
  this.showDropDown = !this.showDropDown;
}
}

指令：

@Directive({
  selector: '[emClickOutsideSearchBox]'
})
export class ClickOutsideSearchBoxDirective {

    @Output() public clickOutsideSearchBox = new EventEmitter();
    constructor(private _elementRef: ElementRef) { }

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        if (!targetElement) {
            return;
        }
        const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!isClickedInside) {
            this.clickOutsideSearchBox.emit(null);
        }
    }

  }