BlazorX.NavigationState

Blazorx.NavigationState

Blazorx.NavigationState bietet eine Reihe von Dienstprogrammen, mit denen Sie Abfragebräge an Blazor -Komponenten beobachten und binden können.

Erste Schritte

1. Fügen Sie das Paket Blazorx.NavigationState in Ihr Blazor -Projekt hinzu.

2. Registrieren Sie wie folgt bei Ihrem Host Builder bei Ihrem Host Builder:

    builder . Services . AddNavigationState ( ) ;

3. Fügen Sie den Namespace Blazorx.NavigationState zu Ihren _imports.razor hinzu.

Abfragemeigenschaft

Sie können die Methode QueryProperty auf NavigationState verwenden, um ein Objekt zu erstellen, das einen bestimmten Abfrage -Zeichenfolgenparameter verfolgt. Mit diesem Objekt können Sie wie ein Normalwert an Kontrollen binden.

Im folgenden Beispiel werden die Benutzertypen in der Eingabe in der URL (z. B. http: // localhost/? Name = Diego) und umgekehrt reflektiert.

 @inject INavigationState NavigationState

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

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

Abfragebereich

Die QueryArray -Klasse befasst sich mit Abfragesteichen, die in der URL mehrmals angezeigt werden können. Es ist nützlich, mit der Sammlung von Dingen umzugehen.

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

Beobachtbar

Sowohl QueryProperty als auch QueryArray unterstützen Observables über den Immobilien -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 ();
       });
   }
}