單擊外部關閉下拉菜單（Angular 4）

Question

所以我有一個輸入：

<input id='search'placeholder="Search" formControlName='search'
       (click)="toggleDropDown()" type='text' novalidate>

當你點擊它時，它會顯示一個“下拉”菜單：

<div *ngIf="showDropDown"
           class="search-bar-results">
        <li
          *ngFor="let x of searchItems | filter: getSearchValue()"
          (click)="selectValue(artist)">
            <img src="{{x.image}}"
                 alt="search result artist image"
                 class="search-bar-image">
            <p>{{x.name}}</p>
            <p>{{x.type}}</p>
        </li>
      </div>

這是打字稿：

showDropDown = false;

toggleDropDown() {
    this.showDropDown = !this.showDropDown;
    console.log('clicked');
  }

當用戶點擊輸入時，下拉菜單會出現在 DOM / 屏幕上。 到目前為止，我只能通過單擊輸入本身來關閉下拉菜單，但我試圖找到一種通過單擊其他位置來關閉菜單的方法。

Answer 1

參考blur ： blur Angular 2

與此相符的事情：

<input id='search'placeholder="Search" formControlName='search'
   (click)="toggleDropDown()" (blur)="closeDropDown()" type='text' novalidate>

TS：

closeDropDown() {
    this.showDropDown = false;
    console.log('clicked outside');
}

Answer 2

您可以執行以下操作：

1）在“@Component”裝飾器中添加主機：

  host: {
    "(window:click)": "onDropClick()"
  }

2）添加您在主機上調用的函數：

  onDropClick() { // close drop down
    this.YOUR-DROP-DOWN-NAME = false;
  }

3) 停止傳播你的 drop 事件：

  onSearchDrop(event) { // YOUR DROP DOWN FUNCTION
    event.stopPropagation(); // Drop down propagation
  }

例子：

@Component({
  selector: 'app-search-page',
  templateUrl: './search-page.component.html',
  styleUrls: ['./search-page.component.scss'],

  host: {
    "(window:click)": "onDropClick()"
  }

})
export class SearchPageComponent implements OnInit {
  searchDrop = false;

  constructor() { }

  ngOnInit() {
  }

  onSearchDrop(event) {
    this.searchDrop = true;
    this.modalDrop = false;

    event.stopPropagation(); // Drop down propagation
  }


  onDropClick() { // close drop down
    this.searchDrop = false;
  }

}