页面刷新或直接链接时，最外面的CascadingValue丢失了

问题描述

我想在Blazor应用程序中共享几个组件。这些碰巧是SyncFusion组件-一个是SfToast，一个是SfDialog。我认为一种简单的方法是将组件放在MainLayout.razor上，然后对每个组件使用<CascadingValue>来将引用传递给所有子页面和组件。

只要通过<NavLink>元素或使用NavigationManager.NavigateTo()进行页面导航，此方法就可以正常工作。但是，如果页面进行了深度链接或刷新，则最外面的<CascadingValue>将变为空。要解决此问题，我创建了一个额外的伪<CascadingValue>作为最外面的伪对象，以确保我真正关心的值填充在刷新或直接链接上，但这感觉像是被黑客入侵了。我想知道我执行此操作的方式是否固有错误，从而导致最外面的<CascadingValue>在刷新时变为空。

下面是一些示例代码来说明此问题。这是非常人为设计的方法，但这是我找出创建显示问题的minimal reproducible example的唯一方法。

如果您运行该项目并单击“转到示例页面”按钮，则会看到CompOne和CompTwo组件引用均已按预期设置为值。但是，如果您随后刷新页面，则会看到CompOne引用（最外面的<CascadingValue>）现在为空。

项目的布局如下（从默认的Blazor Server模板创建，因此我仅显示了进行修改的区域）

+ BlazorSample
| + Components (I added this folder)
  | - ComponentOne.razor
  | - ComponentTwo.razor
| + Pages
  | - Index.razor
  | - SamplePage.razor
| + Shared
  | - MainLayout.razor

MainLayout.razor

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

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

    <div class="content px-4">
        <CascadingValue Name="CompOne" Value="ComponentOne">
            <CascadingValue Name="CompTwo" Value="ComponentTwo">
                @Body
            </CascadingValue>
        </CascadingValue>
    </div>

    <BlazorSample.Components.ComponentOne @ref="ComponentOne"></BlazorSample.Components.ComponentOne>
    <BlazorSample.Components.ComponentTwo @ref="ComponentTwo"></BlazorSample.Components.ComponentTwo>
</div>

@code{ 
    public BlazorSample.Components.ComponentOne ComponentOne;
    public BlazorSample.Components.ComponentTwo ComponentTwo;
}

ComponentOne.razor

@code {
    // this would normally contain something useful
    public string ThisIsNotUseful = "This is just a sample";
}

ComponentTwo.razor

@code {
    // this would normally contain something useful
    public string ThisIsNotUsefulEither = "This is just a sample";
}

Index.razor

@page "/"
@inject NavigationManager NavigationManager

<button class="btn btn-primary"
        @onclick="@(() => NavigationManager.NavigateTo("/samplepage"))">
    Go to Sample Page
</button>

SamplePage.razor

@page "/samplepage"

<div class="row">
    <div class="col-12">
        CompOne is null: @(CompOne == null)
    </div>
</div>
<div class="row">
    <div class="col-12">
        CompTwo is null: @(CompTwo == null)
    </div>
</div>

@code{
    [CascadingParameter(Name = "CompOne")]
    public BlazorSample.Components.ComponentOne CompOne { get; set; }

    [CascadingParameter(Name = "CompTwo")]
    public BlazorSample.Components.ComponentTwo CompTwo { get; set; }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blazor blazor-server-side syncfusion