BlazorX.NavigationState

Blazorx.navigationState

Blazorx.navigationState는 쿼리 문자열을 Blazor 구성 요소에 관찰하고 바인딩 할 수있는 유틸리티 세트를 제공합니다.

시작하기

1. Blazorx.NavigationState 패키지를 Blazor 프로젝트에 추가하십시오.

2. 다음과 같이 호스트 빌더에 Blazorx.navigationState를 등록하십시오.

    builder . Services . AddNavigationState ( ) ;

3. 네임 스페이스 blazorx.navigationstate를 _imports.razor에 추가하십시오.

쿼리 속성

NavigationState에서 메소드 QueryProperty를 사용하여 주어진 쿼리 문자열 매개 변수를 추적하는 객체를 만들 수 있습니다. 이 객체를 사용하면 정상 값처럼 컨트롤에 바인딩 할 수 있습니다.

아래 예에서는 입력의 사용자가 입력 유형이 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 " , " " );
   }
}

쿼리 배열

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