Страница Blazor, отображающая текст Blazor.Shared.Component вместо фактического компонента внутри другого компонента - PullRequest
Новая
       71

Страница Blazor, отображающая текст Blazor.Shared.Component вместо фактического компонента внутри другого компонента

0 голосов
/ 12 февраля 2020

Blazor не отображает дерево в ожидаемом порядке на моей странице Blazor. Это рендеринг текста Blazor.Shared.BoxHeader и Blazor.Shared.BoxFooter и фактического компонента. В моей демонстрации есть 

<Box>
    <BoxFooter>This is a box footer</BoxFooter>
    <BoxHeader>This is a box header</BoxHeader>
</Box>
  1. Неправильный порядок дочерних компонентов преднамеренный, я пытаюсь заставить Blazor исправить это. Я могу вручную исправить порядок, если я размещу дочерние компоненты в правильном порядке и использую ChildContent в компоненте Box, но это отрисовка компонента буквально, а это не то, что я пытаюсь получить.
  2. Я хочу удалить текстовую версию дочерних компонентов и фактически отобразить компонент. Я хочу остановить рендеринг буквальных дочерних компонентов, которые уже существуют.

Я должен упомянуть, что используется Blazor на стороне клиента, а не на стороне сервера, но я не уверен, что это должно изменить ответ.

В файле Box.blazor 

<CascadingValue Value=this>
    <div @attributes="CustomAttributes">
        @ChildContent
        @if (BoxHeader != null)
        {
            @BoxHeader
        }
        @if (BoxFooter != null)
        {
            @BoxFooter
        }
    </div>
</CascadingValue>

@code
{
    public BoxHeader BoxHeader { get; set; }

    public BoxFooter BoxFooter { get; set; }

    protected void ChildStateHasChanged()
    {
        base.StateHasChanged();
    }

    public void SetBoxHeader(BoxHeader BoxHeader)
    {
        this.BoxHeader = BoxHeader;
    }

    public void SetBoxFooter(BoxFooter BoxFooter)
    {
        this.BoxFooter = BoxFooter;
    }


}

В файле BoxHeader.blazor 

<div class="box__header">
    This is a box header
</div>

@code
{
    [CascadingParameter]
    public Box Parent { get; set; }

    protected void Register(Box Parent)
    {
        Parent.SetBoxHeader(this);
    }

    protected void StateHasChanged()
    {
        base.StateHasChanged();
    }
}

В файле BoxFooter.blazor 

<div class="box__footer">
    This is a box footer
</div>

@code
{
    [CascadingParameter]
    public Box Parent { get; set; }

    protected void StateHasChanged()
    {
        base.StateHasChanged();
    }

    protected void Register(Box Parent)
    {
        Parent.SetBoxFooter(this);
    }
}
...