BlazorX.NavigationState

Blazorx.NavigationState

Blazorx.NavigationState fournit un ensemble de services publics qui vous permettent d'observer et de lier les chaînes de requête aux composants du blazor.

Commencer

1. Ajoutez le package blazorx.navigationstate à votre projet Blazor.

2. Enregistrez Blazorx.NavigationState avec votre constructeur d'accueil comme suit:

    builder . Services . AddNavigationState ( ) ;

3. Ajoutez l'espace de noms Blazorx.NavigationState à votre _import.razor.

Interrogation de requête

Vous pouvez utiliser la méthode queryProperty sur NavigationState pour créer un objet qui suivra un paramètre de chaîne de requête donné. Avec cet objet, vous pouvez vous lier aux contrôles comme une valeur normale.

Dans l'exemple ci-dessous, tout ce que l'utilisateur type dans l'entrée sera reflété dans l'URL (par exemple http: // localhost /? Name = diego) et vice-versa.

 @inject INavigationState NavigationState

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

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

Baisse de requête

La classe QueryArray traite des chaînes de requête qui peuvent apparaître plusieurs fois dans l'URL. Il est utile de faire face à la collecte de choses.

 @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 ]);
   }
}

Observable

QueryProperty et QueryArray prennent en charge les observables via la propriété 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 ();
       });
   }
}