Angular2 - @HostListener（ 'focus'）が機能しません。

Question

@HostListenerでフォーカスイベントをキャッチしようとしています。 しかし、それは私のためにうまくいきません。

以下の記事を見ました。

HTML5 event handling(onfocus and onfocusout) using angular 2

もplunkerが記事に登場しました。それは私に取り組ん

http://plnkr.co/edit/0K1nxX2ltZ4ztfe5uJ6E?p=preview

。 しかし私は以下のように変更しましたが、それはうまくいかないでしょう。

フォーカスアウトについては、両方とも呼び出されます。 しかし、focus（focusin）はfocusFunctionだけで動作し、onHocusListenerではonFocusでは動作しません。

@HostListenerをフォーカスイベントで動作させるにはどうすればよいですか？

Answer 1

これは、@HostListenerがホスト要素にリスナーを接続するためです。この場合、ホスト要素は<my-app></my-app>要素です。 <input>要素の内部にフォーカスすると、フォーカスイベントはその親にバブルアップしません。また、特定の要素だけが実際にfocusイベントを発生させることができ、my-app要素はその1つではありません。

投稿した例では、@Directiveが使用され、<input>要素に配置されています。明らかに、指示にフォーカスイベントを聞くことが可能になります。

を属性として設定することで、カスタム要素が(focus)イベントを発生させることができます。代わりに focusout HostListenerの

Answer 2

使用ぼかし

@HostListener('blur') onblur() { ....... ....... }