Пользовательский компонент Blazor с пользовательскими дочерними компонентами

То, как вы пытаетесь это сделать, неверно, если только вы не визуализируете свой @ActionBar самостоятельно, что я не думаю, что вы пытались.

Это из моего проекта с открытым исходным кодом Blazor Chat:

Источник: https://github.com/DataJuggler/BlazorChat.

Действующий сайт: не так много пользователей одновременно. https://blazorchat.com

Это моя индексная страница. ScreenType - это переменная перечисления.

@if (ScreenType == ScreenTypeEnum.Join)
{ 
    <Join Parent=this></Join>
}
else if (ScreenType == ScreenTypeEnum.Login)
{
    <Login Parent=this></Login>
}
else
{
    <Chat Parent=this></Chat>
    @if (TextHelper.Exists(Message))
    {  
        <div class="message">
            @Message
        </div>
    }
}  

С Parent = this дочерние компоненты и родительские компоненты и страницы могут взаимодействовать через интерфейсы. Я не буду здесь вдаваться в подробности, но если кому-то интересно, вот сообщение в блоге, которое я написал на эту тему около шести месяцев назад:

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

Я не могу опубликовать весь проект, но вот несколько важных частей, которые могут помочь вам лучше понять родительские / дочерние компоненты.

Это пример в проекте компонента, имеющего несколько дочерних компонентов:

Chat.razor:

@if (HasUser)
{
    @if (Connected)
    {
        <div class="chatroom2">
            @if (ListHelper.HasOneOrMoreItems(Messages))
            {
                foreach (SubscriberMessage message in Messages)
                {
                    <SpeechBubble Message=message>
                    </SpeechBubble>
                }
            }
        </div>
        <div class="whoseonlist">            
            @if (ListHelper.HasOneOrMoreItems(Names))
            {  
                @foreach (SubscriberCallback callback in Names)
                {
                    <button class="listbutton" @onclick="(Action<EventArgs>) (args => 
SendPrivateMessageClicked(args, callback.Id))">@callback.Name</button><br />
                }
            }
            <textarea class="typedtext" @bind="MessageText"></textarea>
            <button class="greenbutton8" 
@onclick="BroadCastMessage">Broadcast</button>
            <div class="privatemessageinfo">
                Click a name to send<br />a private message.
            </div>
        </div> 
    }
    else
    { 
        <div id="ChatRoom" class="chatroom">
            <div class="moveup4">
                Enter Chat<br />
                <input type="text" @bind="SubscriberName" /><br />
                <button class="greenbutton6" 
@onclick="@RegisterWithServer">Connect</button>
            </div>
        </div>    
    }
}
else
{
    <div class="loginorjointochat">
    </div>
}

Если вы действительно хотите отобразить HTML, у облачка речи есть свойство сообщения, и оно очищает HTML. Итак, если пользователь вводит, я обнаружил этот классный сайт https://pixeldatabase.net (мой сайт), Sanitized код отображается как гиперссылка (я заменяю текст и превращаю его в тег привязки), но также, если сообщение содержит тег, выделенный жирным шрифтом, текст отображается как полужирный, или разрывы строк HTML работают для разделения строк и т. д. .

foreach (SubscriberMessage message in Messages)
{
    <SpeechBubble Message=message>
    </SpeechBubble>
}

Это работает благодаря этому пакету Nuget: HtmlSanitizer

И ссылка на него - Ganss.XSS, что мне потребовалось некоторое время, чтобы понять.

Вот класс с методом расширения, если кому-то это нужно:

using Ganss.XSS;
using Microsoft.AspNetCore.Components;

namespace BlazorChat
{
    public static class MarkupStringExtensions
    {
        public static MarkupString Sanitize(this MarkupString markupString)
        {
            return new MarkupString(SanitizeInput(markupString.Value));
        }

        private static string SanitizeInput(string value)
        {
            var sanitizer = new HtmlSanitizer();
            return sanitizer.Sanitize(value);
        }
    }
}

Вот снимок экрана с визуализированным текстом HTML: