Blazor 如何讓 Blazor 組件不重新加載/重新渲染

Question

我正在 Blazor 中構建一個動態下拉導航欄。現在的問題是，當發生分頁時，導航欄組件會重新加載並且下拉列表會消失（這不是我想要的）。

我知道這是真的，因為當我使用navigationManager.NavigateTo(route); 不等式然后它按預期工作。

我的主要布局：

<div style="height: 100%; width: 100%; display: flex;">
    <div style="height: 100%; width: 170px">
        <NavigationMenu></NavigationMenu>
    </div>

    <div class="flex-child-expand">
        @Body
    </div>
</div>

NavigationMenu.razor

<div>
            @foreach (var navButton in NavManager.MainNavButtons)
            {
                <div class="dropdown">
                    <button class="@navButton.StyleClassString" @onclick="@(() => OnButtonClicked(navButton, navButton.ButtonRoute))">@navButton.ButtonString</button>
                    <div class="dropdown-content">
                        @foreach (var button in navButton.SubSection)
                        {
                            <button class="@button.StyleClassString" @onclick="@(() => OnButtonClicked(navButton, button.ButtonRoute, button.ButtonString))">@button.ButtonString</button>
                        }
                    </div>
                </div>
            }

        </div>

 private void OnButtonClicked(NavManager.NavButton mainButtonPressed, string route, string buttonString = "")
    {
        if(buttonString == "")
        {
            foreach (var mainbtn in NavManager.MainNavButtons)
            {
                if (mainbtn.Section == mainButtonPressed.Section)
                {
                    mainbtn.StyleClassString = ButtonActiveStyle.active;
                }
                else
                {
                    mainbtn.StyleClassString = ButtonActiveStyle.normal;
                }

                //cleanup
                foreach (var subButton in mainbtn.SubSection)
                {
                    subButton.StyleClassString = ButtonActiveStyle.normal;
                }
            }

            if(mainButtonPressed.SubSection.Count > 0)
            {
                mainButtonPressed.SubSection[0].StyleClassString = ButtonActiveStyle.active;
            }

        }
        else
        {
            foreach (var mainbtn in NavManager.MainNavButtons)
            {
                if (mainbtn.Section == mainButtonPressed.Section)
                {
                    mainbtn.StyleClassString = ButtonActiveStyle.active;
                }
                else
                {
                    mainbtn.StyleClassString = ButtonActiveStyle.normal;
                }


                foreach (var subButton in mainbtn.SubSection)
                {
                    if (subButton.ButtonString == buttonString)
                    {
                        subButton.StyleClassString = ButtonActiveStyle.active;
                    }
                    else
                    {
                        subButton.StyleClassString = ButtonActiveStyle.normal;
                    }
                }
            }

        }

        GoToPage(route);

    }

    private void GoToPage(string route)
    {
        navigationManager.NavigateTo(route);
    }

*抱歉縮進不好。

那么有沒有辦法讓 NavigationMenu.razor 組件在我調用navigationManager.NavigateTo(route); ？

Answer 1

為避免組件自動重新加載，您應該覆蓋ShouldRender方法，並使其始終返回 false。

但是，您應該檢查結果 HTML。您導航到的頁面似乎沒有繼承 MainLayout。

這意味着它將覆蓋

<div style="height: 100%; width: 100%; display: flex;">
    <div style="height: 100%; width: 170px">
        <NavigationMenu></NavigationMenu>
    </div>

    <div class="flex-child-expand">
        @Body
    </div>
</div>

頁面包含的任何部分，即使您在 ShouldRender 中返回 false。

NavigationMenu 組件中的 state 更改不應使其消失。

Answer 2

NavigateTo(route) 重新加載由“route”地址指定的整個頁面。 布局在頁面級別指定。 當您導航到一個地址時，布局會再次初始化，其 UI state 會重置。 這意味着您所有的下拉擴展、格式更改等都將丟失。 例如，在您的情況下，以下 CSS 分配將丟失：

subButton.StyleClassString = ButtonActiveStyle.normal;

subButton(s) 的 StyleClassString 成員將被重置為初始值（是 null 嗎？）

因此，確保下拉列表保留其 state 的唯一方法是將其存儲在某個地方。 您可以通過兩種方式實現它：

1. 從當前URL讀取
2. 將它作為 state 存儲在 memory 的某處，並在 OnInitialized 中讀取它（復雜，我不會真正推薦）