如何从子组件修改MudBlazor中MudAppBar的文本？

针对你的需求，这里提供两种Blazor组件间通信的常用方法，实现EditCustomer子组件更新MainLayout中MudAppBar的文本内容：

方法一：通过级联值传递更新方法 #

这种方式让主布局暴露更新AppBar文本的公开方法，通过CascadingValue传递给所有子组件，子组件直接调用该方法完成更新。

1. 改造MainLayout.razor #

添加公开的文本更新方法，并将其通过级联值传递到@Body区域：

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        @appBarText
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="2">
        <MudDrawerHeader>
            <MudText Typo="Typo.h5" Class="mt-1">Application</MudText>
        </MudDrawerHeader>
        <NavMenu></NavMenu>
    </MudDrawer>
    <MudMainContent>
        <!-- 传递更新AppBar文本的方法 -->
        <CascadingValue Value="UpdateAppBarText">
            @Body
        </CascadingValue>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;
    private string appBarText = "Default AppBar Text";

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }

    // 公开的文本更新方法
    public void UpdateAppBarText(string newText)
    {
        appBarText = newText;
        StateHasChanged(); // 通知组件重新渲染UI
    }
}

2. 改造EditCustomer.razor子组件 #

接收级联的更新方法，在需要的场景（比如按钮点击、组件初始化）调用该方法：

<MudCard>
    <MudCardContent>
        <MudTextField @bind-Value="newAppBarText" Label="输入新的AppBar文本" />
        <MudButton OnClick="UpdateAppBar" Variant="Variant.Filled" Color="Color.Primary" Class="mt-3">更新标题</MudButton>
    </MudCardContent>
</MudCard>

@code {
    private string newAppBarText = "编辑客户";

    // 接收级联的更新方法
    [CascadingParameter]
    public Action<string> UpdateAppBarText { get; set; }

    // 组件初始化时自动设置标题
    protected override void OnInitialized()
    {
        UpdateAppBarText?.Invoke(newAppBarText);
    }

    // 按钮点击触发更新
    private void UpdateAppBar()
    {
        UpdateAppBarText?.Invoke(newAppBarText);
    }
}

方法二：通过级联主布局实例直接调用方法 #

如果需要更灵活地操作主布局的其他属性，可以直接将MainLayout实例通过级联值传递，子组件调用其公开方法。

1. 改造MainLayout.razor #

将自身实例作为级联值传递：

<MudMainContent>
    <CascadingValue Value="this">
        @Body
    </CascadingValue>
</MudMainContent>

@code {
    // 保留之前的代码，UpdateAppBarText方法保持公开
}

2. 改造EditCustomer.razor #

接收MainLayout实例，调用其更新方法：

<MudCard>
    <MudCardContent>
        <MudTextField @bind-Value="newAppBarText" Label="输入新标题" />
        <MudButton OnClick="UpdateAppBar" Variant="Variant.Filled" Color="Color.Primary" Class="mt-3">更新</MudButton>
    </MudCardContent>
</MudCard>

@code {
    private string newAppBarText = "编辑客户页面";

    // 接收主布局实例
    [CascadingParameter]
    public MainLayout MainLayoutInstance { get; set; }

    protected override void OnInitialized()
    {
        MainLayoutInstance?.UpdateAppBarText(newAppBarText);
    }

    private void UpdateAppBar()
    {
        MainLayoutInstance?.UpdateAppBarText(newAppBarText);
    }
}

关键注意点 #

• 调用方法时使用?.空值运算符，避免未获取到级联值时出现空引用异常。
• 修改文本后调用StateHasChanged()确保UI及时刷新。

内容的提问来源于stack exchange，提问作者user3552264