Blazor - 如何将属性应用于组件的父元素

Question

我有以下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>

如您所见，我有一个名为 NavMenuToggleComponent 的组件，其代码为：

@inherits Blazor.Web.Functions.MenuFunctions

<div class="pl-4  navbar navbar-dark">
<button class="navbar-toggler navbar-brand main-button" title="MENU" onclick=@ToggleNavMenu>
    MENU
</button>
</div>

<div class="sidebar @(CollapseNavMenu ? "collapse" : null)">
    <NavMenu />
</div>

我在按钮单击事件上有一个函数，它在 MenuFunctions 类中声明。这个，函数简单地有：

public  void ToggleNavMenu()
{
    CollapseNavMenu = !CollapseNavMenu;
}

现在为了让这个函数简单，我希望能够为父元素上的元素添加一个属性，该元素上有类内容。所以作为一个例子，我可能希望它最终成为<div class="content px-4" style="color:red"> 那么我将如何附加样式属性？

Answer 1

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

为此，您需要将 div 包装在这样的 CascadingValue 中

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

现在，您需要定义 LayoutState 是什么，因此创建一个新的 Class 并在其中创建一个属性来保存您需要的任何共享状态。

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

在您的 LayoutFunctions 类中，添加一个字段或属性来保存状态并将其命名为 LayoutState（在此示例中）

public SharedMenuState LayoutState = new SharedMenuState;

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

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

最后你的按钮点击处理程序可以是

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

我是凭记忆写的，所以请原谅命名错误。