blazor中的数据属性

Question

我想添加一个HTML5数据属性到我的blazor组件:

<div data-is-loaded=@_isLoaded>
...
</div>
@code {
private bool _isLoaded = false;
protected override void OnInitialized() => _isLoaded = true;
}

但这显示:<div data-is-loaded="">.

我也试过:

• 飞溅到动态创建的字典

  <div @attributes=@(new Dictionary<string, object> { { "data-is-loaded", _isLoaded } })>
  

• 和使用属性代替字段

…

我知道变量包含我期望的值，因为这是有效的:

<div class=@(_isLoaded ? "loaded" : "")>

如您所见，这不是传递给组件的数据。它只是我想添加的一些基本值作为数据属性(我相信你已经猜到了，这是一种向组件的相关javascript发送信号的方法)。

如何做到这一点?

Answer 1

HTML属性必须是字符串，因此可以通过将_isLoaded转换为字符串来解决这个问题:

<div data-is-loaded=@(_isLoaded ? "true" : "false")>
...
</div>
@code {
private bool _isLoaded = false;
protected override void OnInitialized() => _isLoaded = true;
}

你可以修改字符串来满足你的需要。

这是blazorfiddle的例子(你可能需要使用chrome):https://blazorfiddle.com/s/mj2vt94g