ユーザーが検索ボックスの外側をクリックすると角の検索ボックスが消える必要があります

Question

検索ボックスを含むAngular（4）でアプリケーションを作成しています。ユーザーが検索すると、searching変数がtrueになります。ユーザーが検索ボックスの外側をクリックすると、この変数はfalseに変わる必要があります。私は(blur)と(focus)属性で動作するようにこれをgottonいる

：しかし、今

<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> 

問題は、ユーザーが検索結果の1をクリックすると、outputProduct(product)関数は、今と呼ばれていない、ということです。これは、[hidden]属性がクリックイベントが私のリストアイテムに届かないためです。この機能を実装する正しい方法は何でしょうか？

Answer 1

リスト結果にフォーカスがあるかどうかを確認する別のブール型変数を追加してみます。あなたが全体のdivの外に焦点を当てたときに

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> 

は変数focusOnListがfalseに設定されています。また、検索している場合、またはマウスがリストの上にある場合は、リストを表示します。