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;

所以，现在你的菜单函数类可以采用级联参数来访问LayoutState

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

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

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

我已经从内存中写了这个，所以请原谅命名错误。

Answer 2

试试这个：

1. 在NavMenuToggleComponent组件中定义一个属性，该属性返回CSS字符串样式值，例如“color：red”
2. 在布局组件中添加一个ref属性，该属性包含对NavMenuToggleComponent组件的引用： <NavMenuToggleComponent ref="refNavMenuToggleComponent"> </NavMenuToggleComponent> 定义一个变量来保存对Component实例的引用，以及一个属性来存储检索到的样式...... @functions {NavMenuToggleComponent refNavMenuToggleComponent;私有字符串StyleMe {get;组; } protected override void OnInit() {StyleMe = refNavMenuToggleComponent.GetStyles; } }

要做：访问您在NavMenuToggleComponent组件中定义的样式属性。这应该在OnInit方法中完成，并将返回的值分配给您可以分配给div的字段。像这样的东西：

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

希望这有效......