BlazorX.NavigationState

Blazorx.navigationState

Blazorx.NavigationState fornece um conjunto de utilitários que permitem observar e ligar strings de consulta aos componentes do Blazor.

Começando

1. Adicione o pacote blazorx.navigationState ao seu projeto Blazor.

2. Registre Blazorx.navigationState com seu construtor host da seguinte forma:

    builder . Services . AddNavigationState ( ) ;

3. Adicione o espaço para nome blazorx.navigationState ao seu _imports.razor.

Propriedade de consulta

Você pode usar o método QueryProperty no NavigationState para criar um objeto que rastreará um determinado parâmetro de sequência de consultas. Com este objeto, você pode vincular aos controles como um valor normal.

No exemplo abaixo, qualquer coisa que os tipos de usuário na entrada serão refletidos no URL (por exemplo, http: // localhost/? Nome = diego) e vice-versa.

 @inject INavigationState NavigationState

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

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

Array de consulta

A classe Queryarray lida com seqüências de consultas que podem aparecer várias vezes no URL. É útil lidar com a coleta de coisas.

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

Observável

O QueryProperty e o QueryArray suporta observáveis ​​por meio da Dream de Propriedade:

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