BlazorX.NavigationState

blazorx.navigationState

blazorx.navigationStateは、クエリ文字列をブレザーコンポーネントに観察および結合できるユーティリティのセットを提供します。

はじめる

1. パッケージBlazorx.NavigationStateをBlazorプロジェクトに追加します。

2. 次のように、Blazorx.NavigationStateをホストビルダーに登録してください。

    builder . Services . AddNavigationState ( ) ;

3. namespace blazorx.navigationStateを_imports.razorに追加します。

クエリプロパティ

NavigationStateのMethod QueryPropertyを使用して、特定のクエリ文字列パラメーターを追跡するオブジェクトを作成できます。このオブジェクトを使用すると、通常の値のようにコントロールにバインドできます。

以下の例では、入力内のユーザーがタイプするものはすべて、URL（http：// localhost/？name = diegoなど）とその逆に反映されます。

 @inject INavigationState NavigationState

< input type = " text " @bind-Value = " Name.Value " />

@code {
   IQueryParameter < string > Name ;
   
   protected override void OnInitialized () 
   {
       Name = NavigationState . QueryProperty ( " name " , " " );
   }
}

クエリ配列

QueryArrayクラスは、URLに複数回表示できるクエリ文字列を扱います。物事のコレクションに対処するのに役立ちます。

 @inject INavigationState NavigationState

< ul >
@foreach ( var item in Numbers . Value ) 
{
   < li > @item </ li >
}
</ ul >


@code {
   IQueryParameter < int > Numbers ;
   
   protected override void OnInitialized () 
   {
       Numbers = NavigationState . QueryArray ( " numbers " , new int [ 0 ]);
   }
}

観察可能

QueryPropertyとQueryArrayの両方が、プロパティValueStreamを介して観測可能性をサポートしています。

 @inject INavigationState NavigationState

@Sum
< button @onclick = " @(() => Number.Value += 1) " >Increment</ button > 

@code {
   IQueryParameter < int > Number ;
   int Sum ;
   
   protected override void OnInitialized () 
   {
       Number = NavigationState . QueryProperty ( " n " , 0 );
       
       Number . ValueStream . Subscribe ( x => 
       {
           Sum += x ;
           StateChanged ();
       });
   }
}