Blazor MainLayout 作為 CascadingParameter 始終為 null

Question

所以...我正在開發 Blazor Server 應用程序，在理解級聯參數的工作方式以及為什么我的 MainLayout 始終返回 null 時遇到了麻煩。

我是這樣做的：MainLayout.razor：

<CascadingValue Value="this">
    <PageTitle>Global</PageTitle>
    <div id="wrapper">
        <SfToolbar CssClass="dockToolbar">
            <ToolbarEvents Clicked="@Toggle"></ToolbarEvents>
            <ToolbarItems>
                <ToolbarItem PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>
                <ToolbarItem>
                    <Template>
                        <div class="e-folder">
                            <div class="e-folder-name">Global</div>
                        </div>
                    </Template>
                </ToolbarItem>
            </ToolbarItems>
        </SfToolbar>
        <div id="main-content container-fluid col-md-12" class="maincontent">
            <div>
                <div class="content">@Body</div>
            </div>
        </div>
    </div>

和行為的頁面

登錄.razor:

@page "/sign-in"

<ComponentLibrary.Components.AuthPage backUrl="/"></ComponentLibrary.Components.AuthPage>

@code {
    [CascadingParameter]
    public MainLayout? Layout { get; set; }

    protected override void OnInitialized()
    {
        Layout.userModel = null;
        Layout.RefreshSideBar();
        base.OnInitialized();
    }

}

但是當我進入登錄頁面時，由於某種原因我的布局為空，有什么建議需要看嗎？

我試圖在其他頁面中創建一個新的布局示例，但這完全不是我需要的

Answer 1

是的，你們是對的。 我剛剛注意到有 2 個 MainLayout 文件我錯過了那部分，抱歉。 從項目中刪除額外的布局解決了這個問題

Answer 2

因此，讓我們嘗試重現您的問題。

從標准的 Blazor 服務器項目開始。

@inherits LayoutComponentBase

<PageTitle>SO74799583</PageTitle>
<CascadingValue Value=this>
    <div class="page">
        <div class="sidebar">
            <NavMenu />

        </div>

        <main>
            <div class="top-row px-4">
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>
</CascadingValue>

@code {
    public string RenderTime = DateTime.Now.ToLongTimeString();

    protected override bool ShouldRender()
    {
        RenderTime = DateTime.Now.ToLongTimeString();
        return true;
    }
}

和指數：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div class="bg-dark text-white p-2 m-2">
    Main Component last rendered at: @(this.mainLayout?.RenderTime ?? "Not Rendered")
</div>

@code {
    [CascadingParameter] private MainLayout? mainLayout { get; set; }
}

哪個有效： mainLayout不為空。 所以你沒有向我們展示一切。

但是，您永遠不應該級聯或傳遞對組件的引用。

1. 您無法控制它的生命周期：渲染器是。 當它不再需要它時，它將“處置”它。
2. 有些功能你永遠不應該嘗試從另一個組件使用。

如果您想在組件之間進行通信，請創建一個狀態類，並且：

1. 將其注冊為服務並使用它來引發和注冊事件。
2. 級聯它。

這是一個簡單的例子。

public class MyState
{
    public string LastUpdateTime { get; private set; } = "Not Set";

    public event EventHandler<string>? Updated;

    public void SetTime()
    {
        this.LastUpdateTime = DateTime.Now.ToLongTimeString();
        this.Updated?.Invoke(this, this.LastUpdateTime);
    }
}

布局：

@inherits LayoutComponentBase

<PageTitle>SO74799583</PageTitle>
    <CascadingValue Value=myState>
        <div class="page">
            <div class="sidebar">
                <NavMenu />
            </div>

            <main>
                <div class="top-row px-4">
                    <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
                </div>

                <article class="content px-4">
                    <div class="alert alert-info">@RenderTime</div>
                    @Body
                </article>
            </main>
        </div>
    </CascadingValue>

@code {
    public string RenderTime = DateTime.Now.ToLongTimeString();
    private MyState myState = new();

    protected override void OnInitialized()
        => myState.Updated += OnUpdated;

    private void OnUpdated(object? sender, string value)
        => StateHasChanged();

    public void Dispose()
        => myState.Updated -= OnUpdated;
}

和指數：

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="p-2 m-2">
    <button class="btn btn-primary" @onclick=Update>Update Time</button>
</div>

@code {
    [CascadingParameter] private MyState? myState { get; set; }

    private Task Update()
    {
        myState?.SetTime();
        return Task.CompletedTask;
    }
}