检测元素是否在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和移动元素blur中的事件input。如果你想在点击后显示项目searchlist，你可以结合click事件。

笨蛋演示。