Blazor第5天_Blazor_元件的處理part3.(CascadingParameter)_ParentComponent(特定Layout)中方法在子元件呼叫的方法
近期同事跟主管遇到技術困難協助研究一番
由於UI上標題要於跳轉至特定某頁去更換標題
但原先更新標題觸發事件跟時機都寫在側欄click後才去設定
因此若不是透過側欄點進去的就沒辦法存取更新到正確的標題
CascadingParameter也無法直接從子元件去更新ParentComponent的變數屬性
以往都是單向的設值(從Parent到Child)
Before
After
Step1.要先確認當前該頁引用的是默認全域Layout ParentComponent還是自己有額外設置
以此頁為例就是有使用額外自訂的Layout元件
默認全域Layout ParentComponent
會在App.razor當中
Step2.至Layout元件(只要該頁上方有@inherits LayoutComponentBase 的就都算一種Layout元件)
包覆一組CascadingValue
<CascadingValue Value="this">
…..原先該元件中整頁內容都要包進來…
</CascadingValue>
Step3.於該頁Layout下定義方法(或將標題用C#屬性包覆裡面可設定寫入時候的邏輯)
Step4.至子元件中透過CascadingParameter參考到該特定類型的Layout Component(對目前領料該頁相當於其Parent Component)
並在要賦值或異動時機(可能blazor頁面事件or生命週期)去觸發參考到的Parent Component中定義的設值方法或針對屬性去賦值
參考文章:
官網
Is there any way to communicate to main layout of blazor pages
In Blazor, how to cascade a parameter from @Body back to the layout?
Access Method in a Layout component
CascadingValue is null if you navigate directly to the page
Call method in MainLayout from a page component in Blazor
留言
張貼留言