MarkupString 属性能否将一串自定义组件转换为 DOM 中的 HTML 元素

Question

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

Counter 声明了计数器组件（自定义组件）：

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

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

<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>

预期 output：

我期待执行计数器组件并在 DOM 中呈现 output 元素。

Answer 1

MarkupString 属性能否将一串自定义组件转换为 DOM 中的 HTML 元素

不，它不能。

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

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

Blazor 平台是否支持此功能。

如您所见，事实并非如此。 但是，这可能在未来成为可能，也许是 Blazor 社区。 我不确定这一点，但我认为史蒂夫桑德森与此有关......

希望这可以帮助...