BlazorX.NavigationState

Blazorx.navigationState

Blazorx.NavigationState предоставляет набор коммунальных услуг, которые позволяют вам наблюдать и связывать строки запросов с компонентами Blazor.

Начиная

1. Добавьте пакет Blazorx.navigationState в свой Blazor Project.

2. Зарегистрируйте Blazorx.navigationState с вашим хост -строителем следующим образом:

    builder . Services . AddNavigationState ( ) ;

3. Добавьте пространство имен Blazorx.navigationState в ваш _imports.razor.

Запрос имущество

Вы можете использовать метод QueryProperty на NavigationState для создания объекта, который будет отслеживать заданный параметр строки запроса. С этим объектом вы можете привязать к элементам управления, как нормальное значение.

В приведенном ниже примере все, что пользовательские типы на входе будут отражены в 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 " , " " );
   }
}

Query Array

Класс 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 ();
       });
   }
}