使用 HTML 标签的 C# 字符串插值 - Blazor

Question

在Blazor框架中，可以用HTML标签进行字符串插值吗？例如，我想运行一个循环，使用不同的颜色打印一个句子，但这似乎不起作用（因为它似乎不是正确的方法）。

@page "/HJS"
<h3>HateJS</h3>

<div>
    @foreach(string colorX in colors)
    {
        <p style=$"color:{colorX}">@hateJS</p>
    }
</div>

@code {
    private string hateJS = "I hate JS";
    private string[] colors = { "blue", "red" };
}

如果这不是正确/适当的方法，那么它是什么？

Answer 1

我将提供更详细的概述，以防对其他人有帮助。

假设您定义了以下变量：

var colorEnum = Color.Danger;
var colorString = "red";

var colorStyle = "color: red";
var bgColorStyle = "background-color: yellow";

var classSuccess = "text-success";
var classError = "text-danger";
var classEnd = "text-end";

var customize = true;

var height = 1.5;

概括

原生属性	Blazor 组件参数
属性示例：	参数示例：
style（期望值string）	Style（期望值string）
class（期望值string）	Color（不期望值string）
值等于变量：	值等于变量：
style="@colorStyle"	Style="@colorStyle"
class="@classSuccess"	Color="colorEnum"
值包含变量：	值包含变量：
style="color: @colorString"	Style="@($"color: {colorString}")"
style="height: @(height)rem"	Style="@($"height: {height}rem")"
class="@classSuccess fs-3 @classEnd"	Style="@($"{colorStyle}; {bgColorStyle}")"
值等于条件表达式：	值等于条件表达式：
style="@(customize ? colorStyle : "")"	Style="@(customize ? colorStyle : "")"
class="@(customize ? classError : "")"	Color="@(customize ? colorEnum : null)"
值包含条件表达式：	值包含条件表达式：
style="color: @(customize ? colorString : "blue")"	Style="@($"color: {(customize ? colorString : "blue")}")"

细节

对于原生元素（例如<p>, <div>），该@符​​号作为属性值的一部分可以正常工作：

<p style="color: @colorString">...</p>
<p style="color: @colorString; background-color: @colorString">...</p>

<p style="@colorStyle">...</p>

如果您的变量需要与字符串“连接”，则@()需要符号：

<p style="height: @(height)rem">...</p>

对于Blazor 组件（无论是由 Blazorise 提供还是自制），方法略有不同。

假设您已经定义了一个MyComponent带有参数Color MyColor（枚举值）的组件。MyComponent将解释为 提供的值MyColor，因此可以直接使用该变量：

<MyComponent MyColor="colorEnum" /> // will be interpreted as Color.Danger

如果MyComponents 参数是string MyColor，则提供的值将解释为 a string，除非您使用以下表示法明确表示它是变量@：

<MyComponent MyColor="@colorString" /> // will be interpreted as "red"
<MyComponent MyColor="colorString" /> // will be interpreted as "colorString"

在这样的组件参数中，您无法像在元素属性中那样轻松地混合字符串和变量值（如第一个示例）。@($" { }")对于组件参数，需要使用更复杂的字符串插值表示法。

假设您有一个组件参数MyStyle，用于设置style内部属性MyComponent：

<MyComponent MyStyle="@($"color: {colorString}")" />

如果需要包含条件表达式，则该{ }部分需要扩展为{( )}：

<MyComponent MyStyle="@($"color: {(count > max ? "red" : "blue")}")" />

至于原生元素，当提供组件的属性style（例如属性）的值时，您仍然可以使用简单的表示法，如本答案的第一个示例所示：

<MyComponent style="color: @(colorString)" />

（注意：在组件上使用属性不是开箱即用的操作；本主题不涉及处理该操作。）