BlazorX.NavigationState

Blazorx.NavigationState

Blazorx.NavigationState提供了一組實用程序，使您可以觀察並將查詢字符串與大型構件結合。

入門

1. 將blazorx.navigationstate包添加到您的大火項目中。

2. 註冊Blazorx.NavigationState與您的主機構建器註冊：如下：

    builder . Services . AddNavigationState ( ) ;

3. 將命名空間blazorx.navigationstate添加到_imports.razor。

查詢屬性

您可以在NavigationState上使用方法QueryProperty來創建一個將跟踪給定查詢字符串參數的對象。使用此對象，您可以像正常值一樣綁定到控件。

在下面的示例中，輸入中的用戶類型將反映在URL中（例如http：// localhost/？name = diego）和vice-versa。

 @inject INavigationState NavigationState

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

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

查詢數組

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均通過屬性Valuelems支持可觀察到的信息：

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