Blazor 5を使用したラジオプレーヤー

私はBlazor 5ドキュメントを読んでおり、その機能を試してみるための簡単なプロジェクトを作成することを決めた.いつものように、私の心の中にアイデアのトンがあったが、devを介してスキャンします.私はALEKSと同じサービスを使用して、Radio-Browserと呼ばれるラジオ局を入手しました.
最初のステップは、単純で簡単にラジオとして使用する適切なUIを選択することでした.私は選手のスタイルをcodepen.io sample for music playerから借りました.ウェイアウトのUIデザインでは、コンポーネントを作成し、コードを取得し、無線局を再生するコードを配線していた.
それは単純なプロジェクトを現在の定義済みジャンルのセットを一覧表示し、選択したジャンルのためのフェッチステーションを維持し、リストとして表示します.ユーザーが駅を選択することができますし、それを聞いてください.

状態の持続性
ジャンルの一覧はleftnavmenuと呼ばれる独自のコンポーネントに含まれます.このコンポーネントは、プレーヤーコンポーネントをレンダリングするメインレイアウトページ内に含まれます.選択したジャンルは、メモリ内のコンテナーで保持されます.状態コンテナは、選択したジャンルを共有するためにleftNavMenuコンポーネントとPlayerコンポーネントの両方で使用されます.ユーザーがleftnavmenuから異なるジャンルを選ぶとき、状態コンテナの値は更新されます、そして、行動は変化のプレーヤー構成要素に通知するために引き起こされます.このアプローチは、ネストされたコンポーネントまたは独立したコンポーネント間の状態を共有するために使用できます.
状態コンテナは、すべてのBlazorコンポーネントに注入され、使用されるサービスコレクション依存コンテナでSingletonインスタンスとして構成されます.

カスケード値とパラメータ
Indexコンポーネントは、ロードされる最初のコンポーネントで、ラジオプレーヤーコンポーネントを含みます.インデックスコンポーネントの初期化の間、ラジオサーバーAPIは、選択されたジャンルのための全てのラジオ局をフェッチするために引き起こされる.フェッチされたラジオ局リストはパラメータとしてラジオプレーヤコンポーネントに渡される.そして、リストの第1のステーションはカスケード値としてラジオプレーヤに渡される.つの違いは、CASCADE値セクション内のすべてのコンポーネントにカスケード値を渡すことができます.パラメータの場合、値は個々のコンポーネントに渡される必要があります.

CSSアイソレーション
CSSでの1つの問題は、スタイルの出血であり、コンポーネントの1つに適用されるスタイルは、同じページにレンダリングされた他のコンポーネントに影響を及ぼします.これはジャンルleftnavmenuコンポーネントの問題でした.この問題を回避するために、ブレーザーがCSSファイルを作成し、CSSファイルをコンポーネントファイルと共にCSSファイルとして作成しました.かみそり.CSSコンポーネントのスタイルは、コンポーネントのUI内のHTML要素と同様にCSSプロパティに一意の識別子を追加することによって、コンパイル時に再書き込みされます.

HTML
<li b-3xxtam6d07>

CSS
li[b-3xxtam6d07]{
    color:red;
}

すべてのコンポーネントのスタイルをバンドルされ、www\index内に含まれます.ヘッドタグ.スタイル.CSS
これらは、このプロジェクトで使用されている新しい機能の3つであり、さらに多くの、JS相互作用のような他の機能があります、イベントの処理は、最初の炎の一部であったプロジェクト内で使用されます.
プロジェクトのソースfotはgithub projectで利用可能です、見て、提案を与える自由に感じる.