Blazor 组件和链接

Question

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

如果您可以访问控件，我将遵循一些基本原理，例如 Winforms 或 UWP。并将 Blazor 组件视为控件。尽我所能在 C# 中完成工作。

目前我知道：

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

但是如何将父级的引用传递给子级？就像设置一个孩子的参数并传递“this”。

这个想法是 Index 的每个子组件都有一个对 Index 组件的引用。 Index 组件对 Index 的每个子项都有一个引用。

这样我就可以做一些事情，比如当我点击 Header 组件中的按钮时。 我可以调用 parent.PopupComponent.Show("Title");

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

提前谢谢你:)

Answer 1

我只是想添加它，因为在尝试像我一样构建 Blazor 应用程序时，有些人可能会发现它很有用。

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

另外值得注意的是，组件构建器的东西在 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;}
}

Answer 2

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

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 {

}

这是奖励：

以下代码sn-p说明了如何将子组件添加到父组件中，您可以从中调用子组件的属性：

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

注意：OnInitialized 方法是在子组件上实现的，对吧？ 而这个词指的是当前对象；那是子组件吧？

希望这会有所帮助...