Blazor компоненты и связь

Question

Просто надеюсь получить некоторую помощь с некоторыми из этих функций Blazor. Я создаю настоящее SPA-приложение без навигации, а это значит, что мне понадобится немало ссылок.

Я собираюсь следовать некоторым принципам, скажем, Winforms или UWP, если у вас есть доступ к элементам управления. И относиться к компонентам Blazor, как к контрольным. Выполните столько работы в C#, сколько сможете.

Насколько я знаю:

• Для дочернего компонента я могу создать обратный вызов события и зарегистрироваться в нем в parent.
• Я могу сохранить ссылку на дочерний компонент с тегом @ref. Затем получите доступ к функциям дочернего компонента после завершения OnRender.
• Я могу динамически построить компонент с помощью компоновщика.

Но как передать ссылку на родительский элемент в ребенок? Как установить дочерний параметр и передать «this».

Идея состоит в том, что каждый дочерний компонент Index имеет ссылку на компонент Index. И компонент Index имеет ссылку на каждого дочернего элемента Index.

Таким образом, я могу делать такие вещи, как когда я нажимаю кнопку в компоненте Header. Я могу вызвать parent.PopupComponent.Show ("Заголовок");

Я знаю, что это может быть достигнуто с помощью обратных вызовов, но я хотел бы иметь возможность сделать любой вызов, который мне нужен, получить доступ к любой переменной et c , Через связь компонентов. Без необходимости устанавливать дополнительную функцию обратного вызова для каждого шага.

Заранее спасибо :)

Answer 1

Вы можете передать ссылку на родительский компонент дочернему компоненту как обычный параметр, например:

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 реализован в дочернем компоненте, верно? И слово это относится к текущему объекту; это дочерний компонент, верно?

Надеюсь, это поможет ...

Answer 2

Я просто хотел добавить это, так как некоторые люди могут найти это полезным при попытке создать приложение 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;}
}