C# Blazor-如何从组件将属性应用于父元素

我有以下cshtml页面：

@inherits BlazorLayoutComponent

<NavMenuToggleComponent></NavMenuToggleComponent>

<div class="main">
<div class="top-row px-4">
    <a href="http://blazor.net" target="_blank" class="ml-md-auto"><span class="col-md-1">About</span></a>
    <NavLink class="nav-link pull-right col-md-2" id="logout" href="logout">
        <span class="fas fa-sign-out-alt" aria-hidden="true"></span><span class="col-md-1 pull-right">Logout</span>
    </NavLink>
</div>

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

现在，为了简化这个函数，我希望能够向父级上包含类内容的元素添加一个属性。因此，作为一个例子，我可能希望它最终成为

，那么我如何附加样式属性？

您有很多选择（DI中的服务、全局静态类、级联值等），但最容易解释的可能是级联值

为此，您需要像这样将div封装在CascadingValue中

<CascadingValue Name="LayoutStateName" Value=@LayoutState>
    <div class="content px-4" style="color:@LayoutState.Color">
        @Body
    </div>
</CascadingValue>

在LayoutFunctions类中，添加一个字段或属性来保存状态并将其称为LayoutState（在本例中）

因此，现在您的MenuFunctions类可以使用CascadingParameter来访问LayoutState

[CascadingParameter(Name="LayoutStateName")] protected SharedMenuState LayoutState { get; set; }

最后，您的按钮点击处理程序可以

public  void ToggleNavMenu()
{
    CollapseNavMenu = !CollapseNavMenu;
    LayoutState.Colour = CollapseNavMenu ? "red" : "green"; // or whatever
}

---

我是从内存中编写的，因此请原谅命名错误。

我成功地使其工作，但我必须将属性声明为静态。

public class SharedMenuState
{
    public string Color { get; set; }
}

public SharedMenuState LayoutState = new SharedMenuState;

[CascadingParameter(Name="LayoutStateName")] protected SharedMenuState LayoutState { get; set; }

public  void ToggleNavMenu()
{
    CollapseNavMenu = !CollapseNavMenu;
    LayoutState.Colour = CollapseNavMenu ? "red" : "green"; // or whatever
}