BlazorX.NavigationState

blazorx.navigationstate

Blazorx.navigationState จัดเตรียมชุดยูทิลิตี้ที่ช่วยให้คุณสังเกตและผูกสตริงแบบสอบถามกับส่วนประกอบของ Blazor

เริ่มต้น

1. เพิ่มแพ็คเกจ blazorx.navigationstate ลงในโครงการ Blazor ของคุณ

2. ลงทะเบียน blazorx.navigationstate กับตัวสร้างโฮสต์ของคุณดังนี้:

    builder . Services . AddNavigationState ( ) ;

3. เพิ่ม namespace 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 " , " " );
   }
}

อาร์เรย์สอบถาม

คลาส 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 ();
       });
   }
}