0

我需要更改标题中微调器的类 - 在获取数据时显示它，并在完成后将其变为不可见。

使用级联值，我可以在布局中拥有：

<CascadingValue Value="classString">
    @Body
</CascadingValue>

在页面中我可以[CascadingParameter] string classStr用来访问布局中设置的值。

如果我想classString在受页面中 classStr 更改影响的布局中，我可以级联一个事件，如此处所示。

但是此示例将事件级联到子组件，<ChildComponent OnStrChange="@ChangeStr">其中OnStrChange使用 [Parameter] 在子组件上定义 where。

我试过级联事件，<CascadingValue Value="eventName" Name="event">但这似乎不起作用。

我可以将事件级联到使用@Body 调用的页面吗？

4

2 回答 2

2

- 编辑 -

@enet 在这个问题上击败了我，但我将把我的答案作为一个稍微精简的版本。

布局.razor

<CascadingValue Value = "this">
    @AnythingThatNeedsAccesToTheSpinner
</CascadingValue>

@code {
    bool IsSpinning {get; set;}

    public async Task SetSpinner (bool SpinValue){
        IsSpinning=SpinValue;
    }
}

AnyThatNeedsAccesToTheSpinner.razor

@code{
    [CascadingParameter]
    Layout Layout {get; set;}

    protected override async Task OnInitializedAsync()
    {
         await Layout.SetSpinner(true);
         await Task.Delay(5000);
         await Layout.SetSpinner(false);
    }
    
}
于 2021-10-15T22:18:58.607 回答
1

您可以采取一条非常迂回的路线，您的布局实现这样的接口并将自身作为级联参数发送。但是，它还有其他副作用。另一种选择是为组件之间的无缝通信创建服务。基本上，您可以使用：

public class SpinnerState
{
    public string SpinnerClass {get;set;}
    public Func<Task> OnSpinnerClassChanged {get;set;}
    public async Task SetSpinnerClass(string newClass)
    {
        SpinnerClass = newClass;
        await OnSpinnerClassChanged.Invoke();
    }
}

将其作为会话服务注入：

    services.AddScoped<SpinnerState>();

然后在布局中使用

@inject SpinnerState state
@implements IDisposable
// hook and unhook event listeners in OnInitialized and Dispose methods respectively

    <div class="@state.SpinnerClass"></div>
    
    @Body //etc


@code
{
    protected override void OnInitialized() 
    { 
       state.OnSpinnerClassChanged += ChangeSpinner;
    }
    async Task ChangeSpinner()
    {
       StateHasChanged();
    }
}

当子组件更新 SpinnerClass 时，布局会更新状态。

注意事项：

  1. 理想情况下，不要这样做。即不要更新 MainLayout 中的 UI。问题是每个布局级别刷新都会导致刷新主体。反过来，这可能会导致组件丢失其状态。相反，（在上面的示例中）让微调器组件监听事件。这样，对状态的任何更新都仅限于微调器组件。

  2. 我想更新 UI 以响应一些长期运行的请求是您真正感兴趣的事情。因此，与其传递 UI 属性更新，不如引发一些功能性事件（如 "UploadingFile" ）并让各个组件响应它。

于 2021-10-15T15:36:36.140 回答