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





留言

這個網誌中的熱門文章

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題