BlazorX.NavigationState

Blazorx.Navigationstate

Blazorx.NavigationState proporciona un conjunto de utilidades que le permiten observar y vincular las cadenas de consulta a los componentes Blazor.

Empezando

1. Agregue el paquete blazorx.navigationstate a su proyecto Blazor.

2. Registre blazorx.navigationstate con su constructor de anfitriones de la siguiente manera:

    builder . Services . AddNavigationState ( ) ;

3. Agregue el espacio de nombres blazorx.navigationstate a su _imports.razor.

Propiedad de consulta

Puede usar el método QuereProperty en NavigationState para crear un objeto que rastree un parámetro de cadena de consulta dado. Con este objeto puede unirse a los controles como un valor normal.

En el siguiente ejemplo, cualquier cosa que los usuarios en la entrada se reflejarán en la URL (por ejemplo, http: // localhost/? Name = diego) y viceversa.

 @inject INavigationState NavigationState

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

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

Matriz de consultas

La clase QueryArray trata con cadenas de consulta que pueden aparecer varias veces en la URL. Es útil lidiar con la colección de cosas.

 @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

Tanto QuereProperty como QueryArray admiten observables a través de la propiedad ValueSteam:

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