Question

我在Angular（4）中创建一个包含搜索框的应用程序。当用户搜索时，searching变量变为true。当用户点击搜索框外部时，此变量需要变为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]属性阻止点击事件到达我的列表项。实现此功能的正确方法是什么？

Answer 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。如果您正在搜索或者鼠标是否在列表上，则显示列表。

当用户在搜索框外单击时，角度搜索框需要消失

1 个答案: