MarkupString属性可以将自定义组件的字符串转换为DOM中的HTML元素 [英] Can MarkupString property convert a string of custom component into HTML elements in DOM

问题描述

我已经创建了Blazor服务器端应用程序.然后在 MarkupString .MarkupString仅将声明的字符串转换为HTML标记.但是它不会将自定义组件转换为HTML元素.Blazor平台是否支持此功能.

I have created a Blazor server side application. And then add the custom component inside the MarkupString. MarkupString only converts the declared string as a HTML tag. But it will not convert the custom component as a HTML elements. Is this supported in Blazor platform.

Counter声明计数器组件(自定义组件):

Counter declares the counter component (custom component):

<div style="height:100%; width:100%;">
    @((MarkupString)@Markup)
</div>
@code {
   string Markup = "<Counter></Counter>";
}

Counter.razor页面包含以下代码.

Counter.razor page contains the following code.

<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>

<h3>Development Mode</h3>
<p>
    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
    It can result in displaying sensitive information from exceptions to end users.
    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
    and restarting the app.
</p>

预期输出:

我希望执行计数器组件并在DOM中呈现输出元素.

I am expecting to execute the counter component and render the output elements in DOM.

推荐答案

MarkupString属性可以将自定义组件的字符串转换为DOM中的HTML元素

Can MarkupString property convert a string of custom component into HTML elements in DOM

不，不能.

MarkupString允许您呈现原始HTML.它将MarkupString内容解析为HTML或SVG，然后将其插入DOM.但是，它不会渲染您的Counter组件.而是将标记转换为小写，并将其视为HTML标记.结果是:

MarkupString allows you to render raw HTML. It parses MarkupString content as HTML or SVG and then insert it into the DOM. However, it won't render your Counter component. Instead it converts the tag to lowercase, and treat it as an HTML tag. This is the result:

<div style="height:100%; width:100%;">
    <counter></counter>
</div>

Blazor平台是否支持此功能?

Is this supported in Blazor platform.

如您所见，事实并非如此.但是，将来可能由Blazor社区实现.我对此不确定，但我认为史蒂夫·桑德森(Steve Sanderson)有与此相关的事情...

As you can see, it is not. However, that might be possible in the future, perhaps by the Blazor community. I'm not sure about this, but I think that Steve Sanderson had something related to this...

希望这对您有帮助...

Hope this helps...

这篇关于MarkupString属性可以将自定义组件的字符串转换为DOM中的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！