检测元素是否在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中点击item后显示，可以结合click事件。

Plunker demo.