BlazorX.NavigationState

Blazorx.NavigationState

يوفر Blazorx.NavigationState مجموعة من الأدوات المساعدة التي تسمح لك بمراقبة وربط سلاسل الاستعلام بمكونات Blazor.

ابدء

1. أضف الحزمة blazorx.navigationState إلى مشروع Blazor الخاص بك.

2. سجل blazorx.navigationstate مع منشئ المضيف الخاص بك على النحو التالي:

    builder . Services . AddNavigationState ( ) ;

3. أضف مساحة الاسم blazorx.navigationstate إلى _imports.razor.

الاستعلام الممتلكات

يمكنك استخدام Method QueryProperty على SavigationState لإنشاء كائن سيتبع معلمة سلسلة استعلام معينة. باستخدام هذا الكائن ، يمكنك ربط عناصر التحكم تمامًا مثل القيمة العادية.

في المثال أدناه ، سيتم عكس أي شيء يقوم به المستخدمون في الإدخال في عنوان 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 Observables عبر الممتلكات 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 ();
       });
   }
}