从组件更新布局中的变量 - Blazor

Question

我有这样定义的布局

@layout MainLayout

@inherits LayoutComponentBase

<CascadingValue Value="this">
    @Body

    @("_total " + _total)

    @("_perPage " + _perPage)

</CascadingValue>

@code {
    public int _total;
    public int _perPage;
}

然后在组件中接收布局引用

[CascadingParameter] public Layout Layout { get; set; }

并在

中这样设置

protected override async Task OnInitializedAsync()
    {
    Layout._total = 3;
    Layout._perPage = 3;
}

问题是 Layout 中的值没有得到更新。我在 setter 语句之后尝试使用“StateHasChanged”，但这似乎没有什么不同

Answer 1

具有 public 功能可以像这样在布局组件中设置值

@layout MainLayout

@inherits LayoutComponentBase

<CascadingValue Value="this">
    @Body

    @("_total " + _total)

    @("_perPage " + _perPage)

</CascadingValue>

@code {
    public int _total;
    public int _perPage;
    
    public void SetTotal(int tot)
    {
        _total = tot;
        StateHasChanged();
    }

     public void SetPerPage(int num)
    {
        _perPage= num;
        StateHasChanged();
    }
}

像这样在任何地方使用您的布局组件，重要的是使用 OnAfterRender 而不是 OnInitialized，因为一旦所有 html 安装在组件

中就会调用 OnAfterRender

<Layout @ref=layout></Layout>

private Layout layout;

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        layout.SetTotal(3);
        layout.SetPerPage(3);
    }
}

Answer 2

您正在设置值，但布局组件中没有任何驱动 StateHasChanged 事件的内容。您可以：

向布局添加一个方法以显式调用您从组件调用的 StateHasChanged。
创建您的值属性并添加调用 StateHasChanged 的设置器 - 可能会变得混乱！
添加特定方法来设置值并调用 StateHasChanged，如 Surinder 的回答中所述。

从组件更新布局中的变量 - Blazor

Update variable in the layout from component - Blazor

blazor

blazor-webassembly