Blazor部件和连杆



只是希望获得一些关于Blazor功能的帮助。我正在构建一个真正的SPA应用程序,没有导航,这意味着我需要一点链接。

我将遵循一些基本原理,比如Winforms或UWP,如果你可以访问控制。将Blazor成分视为对照品。尽我所能在C#中做更多的工作。

到目前为止我知道:

  • 对于子组件,我可以创建一个事件回调,并在父组件中注册
  • 我可以使用@ref标记存储对子组件的引用。然后在完成OnRender之后访问子组件的功能
  • 我可以使用构建器动态构建组件

但是如何将父对象的引用传递给子对象?比如设置子项的一个参数并传递"this"。

其思想是Index的每个子组件都有一个对Index组件的引用。Index组件对Index的每个子级都有一个引用。

这样我就可以做一些事情,比如当我点击Header组件中的按钮时。我可以打电话给家长。PopupComponent.Show("标题"(;

我知道这可以通过回调来实现,但我希望能够通过组件的链接进行我需要的任何调用、访问任何变量等。无需为每个步骤设置额外的回调函数。

提前感谢:(

您可以将对父组件的引用作为常规参数传递给子组件,例如:

Child.razor

@code {
[Parameter]
public Parent Parent { get; set; }
} 

Parent.razor

@* Passing a parent reference to the child component*@
<Child Parent="this" />
@code {
} 

还可以将CascadingParameter传递给子组件。当您想将对父组件的引用传递给所有子组件时,这很有用,例如:

Child.razor

@code {
[CascadingParameter]
public Parent Parent { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
} 

Parent.razor

@* Passing a parent reference to the child components in the form of 
CascadingValue*@
<CascadingValue Value=this>
@ChildContent
</CascadingValue>
@code {

}

这是奖金:

下面的代码片段说明了如何将子组件添加到父组件,您可以从中调用子组件的属性:

protected override void OnInitialized()
{
Parent.AddChild(this);
}

注意:OnInitialized方法是在子组件上实现的,对吗?这个词指的是当前对象;那是子组件,对吧?

希望这能帮助。。。

我只是想添加它,因为有些人可能会发现它在尝试以我的方式构建Blazor应用程序时很有用。

以下是我如何找到一种方法来控制将哪些内容加载到组件中,在我的情况下,我制作了一个空的Flyout/Windows组件,将内容设置为渲染片段。请注意,呈现片段是私有的,这是因为内容将是ShowPopup((调用中定义的BlazorComponent。

同样值得注意的是,组件构建器的东西在Blazor上构建时很可能会过时。这是低级的API,正如开发人员所提到的。他们将来会有更有用的东西。

子组件代码

<div>
...
@childContent
</div>
@code
{
private RenderFragment childContent { get; set; }
public void ShowPopup(Type ComponentType)
{
childContent = CreateDynamicComponent(ComponentType);
//Show popup logic....  
}
RenderFragment CreateDynamicComponent(Type T) => builder =>
{
builder.OpenComponent(0, T);
builder.CloseComponent();
};
}

然后父代码

<div>
...
<button @onclick="@(e => PopupWindow.ShowPopup(typeof(BlazorComponentX)))">Load BlazorComponentX into Popup</button>
<PopupWindow @ref="PopupWindow"></PopupWindow>
...
</div>

@code
{
Public PopupWindow PopupWindow {get; set;}
}

相关内容

  • 没有找到相关文章

最新更新