当用户在搜索框外点击时，Angular 搜索框需要消失答案

【问题标题】：Angular search box needs to disappear when user clicks outside the search box当用户在搜索框外点击时，Angular 搜索框需要消失
【发布时间】：2017-11-18 18:17:45
【问题描述】：

我正在 Angular (4) 中创建一个包含搜索框的应用程序。当用户搜索时，searching 变量变为真。当用户在搜索框外点击时，该变量需要转为 false。

我必须使用 (blur) 和 (focus) 属性：

<mat-form-field class="full-width">
  <input matInput #searchBox (blur)="searching = false" (focus)="searching = true" placeholder="{{ placeHolder }}" autocomplete="off" (keyup)=search(searchBox.value) />
</mat-form-field>
<div class="dropdown">
    <ul [hidden]="!searching">
      <li (click)="outputProduct(product1)"> Option 1 </li>
      <li (click)="outputProduct(product2)"> Option 2 </li>
    </ul>
</div>

然而现在的问题是，如果用户点击其中一个搜索结果，outputProduct(product) 函数现在不会被调用。这可能是因为[hidden] 属性阻止点击事件到达我的列表项。实现此功能的正确方法是什么？

【问题讨论】：

你能在 stackblitz 或 plunkerhard 中复制这个问题吗？

标签： angular

【解决方案1】：

尝试通过添加另一个布尔变量来检查列表结果是否有焦点。

app.component.ts

export class AppComponent  {
  ...
  searching = false;
  focusOnList = true;
}

app.component.html

<div (mouseout)="focusOnList=false">
<mat-form-field class="full-width">
  <input matInput #searchBox (blur)="searching=false" (focus)="searching = true" placeholder="{{ placeHolder }}" autocomplete="off" (keyup)=search(searchBox.value) />
</mat-form-field>
<div *ngIf="searching || focusOnList" class="dropdown" (mouseover)="focusOnList=true" (focus)="focusOnList=true">
    <ul>
      <li (click)="outputProduct(product1)"> Option 1 </li>
      <li (click)="outputProduct(product2)"> Option 2 </li>
    </ul>
</div>
</div>

当你从整个 div 中聚焦时，这里的变量 focusOnList 被设置为 false。如果您正在搜索或鼠标悬停在列表上，则显示列表。

【讨论】：