はいさい！オースティンやいびーん！

概要

新しくnpmパッケージをリリースしたので、共有します！

ngx-visible-autofocusです。

AngularでHTMLElementが見えてきた時に、それを自動的にフォーカスするDirectiveです。

問題

モーダルに隠れている<input>が見えた時に自動的にフォーカスさせたかった。

IntersectionObserverを使ってDirectiveがついている部品を観察し、見えてきたらその要素に対して.focus()を呼ぶ

部品ごとにIntersection Observerを作っていると、パフォーマンスが悪くなるので、ngx-visible-autofocusは、すべての部品に対して同じIntersectionObserverのインスタンスを使い回しています。

どうやって実現できたかというと、ngx-visible-autofocusは、Symbolを使ってHTMLElementに自分のユニークなSymbolの鍵を、AutoFocusDirective.attributeKeyのSymbolの属性に登録します。

そして、AutoFocusDirective.callbackCacheにこの部品が見えた時に実行する.focus()を呼ぶ関数を、上記のユニークSymbolの鍵で登録します。

そうすると、共通のAutoFocusDirectiveの静的IntersectionObserverがこのDirectiveがついている部品を見た時に、それにバインドされているコールバック関数を呼ぶことができるのです。

Angularを使っている人、もしこういう問題を抱えたことがありましたらぜひ使ってください！