MediaObserverを使用したAngularFlex-Layout

前回の投稿では、AngularFlex-Layoutライブラリの設定と使用について説明しました。その投稿では、ディレクティブを使用してライブラリのレスポンシブな側面を確認し、必要に応じてブレークポイントを追加しました。

要約すると、fxLayoutディレクティブをHTMLのDOM要素に追加します。次に、ビューサイズを変更する場所に応じて、省略されたブレークポイントを追加します。たとえば、fxLayout.mdやfxFlexAlign.lt-lgなど...

この投稿では、MediaObserverサービスの使用方法について説明します。

mediaObserverは、以下に示すようにAngularFlex-Layoutライブラリからインストールされます。プロジェクトのターミナルウィンドウで、次のように入力します。

次に、それをapp.module.tsファイルにインポートします。

MediaObserverのサービスが露出するが購読していますことを観察可能であるmediaQueryの変化。また、mediaQueryが現在アクティブであるかどうかを確認するisActive（）バリデーターメソッドとしても機能します。

MediaObserverのサービスは、2つのAPIのを持っています。
asObservable（）：Observable <MediaChange>
isActive（query：string）：boolean

Angular Dependency Injectionを使用して、このサービスを使用するためのコンストラクターパラメーターとしてMediaObserverへの参照を挿入します。

Angular Flex-Layoutのwikiページの現在の例は、少し古くなっています。$メディア、観察は廃止と置き換えられmediaObserver。以下に示すように、変更検出を報告すると結果が重複するため、小さなバグがあるようです。

mediaObserver —重複を表示

これを回避するために、distinctUntilChanged（） RXJS演算子の呼び出しを追加しました（29〜31行目）。オペレーターは、1つの変更のみを発行するようになりました。

現在のブレークポイントをログに記録するようにブラウザのサイズを変更します。

アクティブなブレークポイントのconsole.log

ここでは、画面サイズは小さい（sm）ですが、画面が中（lt-md）未満、大（lt-lg）未満、特大（lt-xl）未満、およびより大きいことも示しています。極小（gt-xs）。ほとんどの場合、実際に必要なのは実際のサイズだけですが、念のために他のサイズを知っておくとよいでしょう。

では、MediaObserverをどのように使用するのでしょうか。

アプリケーションを設計するときは、スペースを最大限に活用するためにUIを変更できるように、画面ビューのサイズがいつ変更されるかを知る必要があります。これは、要素を非表示にするか、行から列に切り替えることを意味する場合があります。次に例を示します。

ブラウザが「md」ブレークポイントに到達すると、DIV（2行目から開始）がDOMから削除されます。

HTMLでmediaObserverを使用するには（上記のように）、get（）でアクセスして表示する必要があります。

別の例を試してみましょう。これを機能させるには、AngularMaterialをインストールする必要があります。

上記のコードを見ていきましょう。

前と同じようにmediObserverをコンストラクターに挿入してから、ブレークポイントの新しいマップを作成します。asObservable（）を使用して、mediaObserverにobservableを設定します。ブラウザのサイズが変更されると、mqAliasから現在設定されているブレークポイントを取得し、グリッド配列から一致する値を取得して、これらすべてをcols変数に割り当てます。

HTMLでは、Angular Materialグリッドリストコンポーネントを設定し、非同期パイプ演算子を使用して、監視可能な列をサブスクライブします。ブラウザの幅が狭くなると、グリッドは縮小します。タイルの行は、1つのタイルだけがページに収まるまで下の行に折り返されます。ブラウザの幅が広がると、タイルが上に移動して1つの長い行を形成します。