使用Angular 2+检测输入焦点

Question

我正在尝试创建一个在您键入时显示的自动完成列表,但在您单击文档上的其他位置时会消失.如何使用Angular 2检测表单输入是否已聚焦.Angular 1具有ng-focus,但我认为Angular 2不再支持它.

<input id="search-box" type="search" class="form-control [(ngModel)]=query (keyup)=filter()>
    <div id="search-autocomplete" *ngIf="filteredList.length > 0">
        <ul *ngFor="#item of filteredList" >
            <li > <a (click)="select(item)">{{item}}</a> </li>
        </ul>
    </div>

顺便说一句,我使用本教程作为指导.

Answer 1

有focus和blur事件:

<input (blur)="onBlur()" (focus)="onFocus()">

Answer 2

对于那些使用@angular/material，您可以获得对MatInput实现MatFormFieldControl接口的实例的引用，该接口公开了一个很好的focused属性。

<mat-form-field>
  <input matInput #searchInput="matInput" type="text" />
  <mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>