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

尝试一下：

在NavMenuToggleComponent组件中定义以下属性：返回CSS字符串样式值，例如“ color：red”
在布局组件中添加一个ref属性，该属性包含对NavMenuToggleComponent组件的引用：

<NavMenuToggleComponent ref="refNavMenuToggleComponent"> </NavMenuToggleComponent>

定义一个变量来保存对Component实例的引用，并定义一个属性来存储检索到的样式...

@功能 { NavMenuToggleComponent refNavMenuToggleComponent; 私有字符串StyleMe {get;组; }
```
protected override void OnInit()
```
{ StyleMe = refNavMenuToggleComponent.GetStyles; }

}

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

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

希望这行得通...

Answer 2

您有很多选择（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
}

我是从内存中写出来的，请原谅命名错误。

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

2 个答案: