Blazor - 如何将属性应用于组件的父元素
Blazor - how to apply attribute to parent element from a component
我有以下 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 Class 中声明。这个,函数只有:
public void ToggleNavMenu()
{
CollapseNavMenu = !CollapseNavMenu;
}
现在为了简化此函数,我希望能够将属性添加到父元素上具有 class 内容的元素。所以作为一个例子,我可能希望它以 <div class="content px-4" style="color:red">
结束,那么我将如何附加样式属性?
您有很多选择(DI 中的服务、全局静态 class、级联值等),但最容易解释的可能是 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 class 中,添加一个字段或 属性 来保存状态并将其命名为 LayoutState(在此示例中)
public SharedMenuState LayoutState = new SharedMenuState;
所以,现在您的 MenuFunctions class 可以使用 CascadingParameter 来访问 LayoutState
[CascadingParameter(Name="LayoutStateName")] protected SharedMenuState LayoutState { get; set; }
最后你的按钮点击处理程序可以是
public void ToggleNavMenu()
{
CollapseNavMenu = !CollapseNavMenu;
LayoutState.Colour = CollapseNavMenu ? "red" : "green"; // or whatever
}
我凭记忆写了这篇文章,所以请原谅命名错误。
我有以下 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 Class 中声明。这个,函数只有:
public void ToggleNavMenu()
{
CollapseNavMenu = !CollapseNavMenu;
}
现在为了简化此函数,我希望能够将属性添加到父元素上具有 class 内容的元素。所以作为一个例子,我可能希望它以 <div class="content px-4" style="color:red">
结束,那么我将如何附加样式属性?
您有很多选择(DI 中的服务、全局静态 class、级联值等),但最容易解释的可能是 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 class 中,添加一个字段或 属性 来保存状态并将其命名为 LayoutState(在此示例中)
public SharedMenuState LayoutState = new SharedMenuState;
所以,现在您的 MenuFunctions class 可以使用 CascadingParameter 来访问 LayoutState
[CascadingParameter(Name="LayoutStateName")] protected SharedMenuState LayoutState { get; set; }
最后你的按钮点击处理程序可以是
public void ToggleNavMenu()
{
CollapseNavMenu = !CollapseNavMenu;
LayoutState.Colour = CollapseNavMenu ? "red" : "green"; // or whatever
}
我凭记忆写了这篇文章,所以请原谅命名错误。