angular - 检测元素是否在 Angular2 中具有焦点

Question

我在输入上使用 (focus)="showSearchList=true"显示文本输入的自动完成下拉列表，并使用 (blur)="showSearchList=false"再次隐藏它。

我的问题是，如果单击下拉列表中的一个结果，我想触发另一种方法，但是通过单击下拉列表中的元素，我触发了输入的模糊方法，因此下拉结果不会被单击.完成这项工作的最佳方法是什么？我使用的是 ES6，而不是 Typescript，并且很难在 Google 上找到任何东西。

这是我目前的模板:

<div id="searchContainer">
    <input [(ngModel)]="search"
           (ngModelChange)="filterSearch()"
           (focus)="showSearchList=true;"
           (blur)="showSearchList=false"
           type="text"
           id="searchJobs"
           placeholder=" Search"/>
    <div *ngIf="showSearchList"
         id="searchDropdown">
        <p *ngFor="let result of filteredSearchResults; let index = index;"
            (click)="addResultToResults(index); search='';">
            {{result}}
        </p>
    </div>
</div>

我认为不是在模糊时将 showSearchList 设置为 false，而是调用一个方法来检查哪个元素具有焦点，并根据该方法隐藏下拉列表，或者运行我的 addResultToResults 方法然后隐藏下拉列表，但我有不知道如何检查哪个元素在 angular2 中具有焦点。

希望得到一些反馈!

Answer 1

我建议使用 mouseleave 事件来控制 searchlist 并从 input 元素移动 blur 事件。如果你想在点击 searchlist 中的项目后显示，你可以结合 click 事件。

笨蛋 demo .