组件关联
可以关联父子组件
父组件
如果是 .razor
组件,需要手动使用 CascadingValue
传入当前组件
List.razor
@inherits BlazorComponentBase
<CascadingValue Value="this">
<ul @attributes="AdditionalAttributes">@ChildContent</ul>
</CascadingValue>
如果是组件类,仅需要定义 ParentComponent
特性即可
[ParentComponent]
public class List : BlazorComponentBase
{
}
子组件
定义 ChildComponent
特性关联父组件
ListItem.razor
@inherits BlazorComponentBase
@attribute [ChildComponent(typeof(List))]
<!--.NET 7-->
@attribute [ChildComponent<List>]
<li @attributes="@AdditionalAttributes">
@ChildContent
</li>
@code{
[CascadingParameter]public List CascadedList { get; set; }
protected override void BuildCssClass(ICssClassBuilder builder)
{
if(CascadedList.Active)
{
//..
}
}
}
ListItem.cs
[ChildComponent(typeof(List))]
//[ChidlComponent<List>] // .NET 7
public class ListItem : BlazorComponentBase
{
[CascadingParameter]public List CascadedList { get; set; }
protected override void BuildCssClass(ICssClassBuilder builder)
{
if(CascadedList.Active)
{
//..
}
}
}
组件 ListItem
必须放在 List
组件中,否则将抛出异常
<List>
<ListItem>...</ListItem>
</List>
<!--throw exception-->
<ListItem />
Optional
true
时将忽略强制关联,不抛出异常
ListItem.razor
@inherits BlazorComponentBase
@attribute [ChildComponent(typeof(List))]
<!--For .NET 7 can use generic attribute-->
@attribute [ChildComponent<List>]
<li @attributes="@AdditionalAttributes">
@ChildContent
</li>
@code{
[CascadingParameter]public List CascadedList { get; set; }
protected override void BuildCssClass(ICssClassBuilder builder)
{
if(CascadedList.Active)
{
//..
}
}
}
ListItem.cs
[ChildComponent(typeof(List), Optional = true)]
//[ChidlComponent<List>(Optional = true)] // for .net7
public class ListItem : BlazorComponentBase
{
//This instance may be null
[CascadingParameter]public List? CascadedList { get; set; }
protected override void BuildCssClass(ICssClassBuilder builder)
{
if(CascadedList is not null && CascadedList.Active)
{
//..
}
}
}
<!--never throw exception-->
<ListItem />
Last updated