通过单击外部关闭下拉菜单（Angular 4）答案

【问题标题】：Close Dropdown menu by clicking outside of it (Angular 4)通过单击外部关闭下拉菜单（Angular 4）
【发布时间】：2018-03-08 01:38:14
【问题描述】：

所以我有一个输入：

<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 / 屏幕上。到目前为止，我只能通过单击输入本身来关闭下拉菜单，但我正试图找到一种通过单击其他地方来关闭菜单的方法。

【问题讨论】：

我看到你完全依赖输入框的点击事件。试试(blur)怎么样？ angular.io/guide/user-input#on-blur

标签： javascript angular typescript drop-down-menu

【解决方案1】：

参考blur:Angular 2 on blur

与此相符：

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

TS：

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

【讨论】：

非常感谢！直接解决了问题，让我想起了blur哈哈
很高兴听到它:)
好答案。直截了当。这将在等待时在任何版本的框架中工作，所以 2+。通常我们不再说 angular2 我们只说 angular 因为 angularjs 原来不是 angular 2+ 的 1.0 版

【解决方案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;
  }

}

【讨论】：