Blazor[Parameter]未使用@ref更新

Question

我正在使用.net6.0 Blazor剃刀库来创建一个组件。

@using Microsoft.JSInterop;
@inject IJSRuntime _jsRuntime;
<audio id="@Id" src="@Source" />
@code {
[Parameter]
public string Id { get; set; }
[Parameter]
public string Source { get; set; }
}

我在剃刀页面中使用这个组件，使用这个：

<AudioPlayer     
Id="reactorAudioElement1"
Source="/audio/lion-roaring.ogg">
</AudioPlayer>

现在一切都很好。

但是，如果我试着那样使用@ref，

<AudioPlayer 
@ref=@_Jukebox2>
</AudioPlayer>
@code {
private AudioPlayer _Jukebox2;
protected override void OnInitialized()
{
_Jukebox2 = new AudioPlayer()
{
Id="reactorAudioElement2",
Source="/audio/Bleep_02.ogg"
};
}
}

DOM中没有设置任何内容。

但我可以读取这样的数据，但我不能设置它…

<AudioPlayer 
@ref=@_Jukebox2
Id="reactorAudioElement2"
</AudioPlayer>
@code {
private AudioPlayer _Jukebox2;
protected override void OnAfterRender(bool firstRender)
{
Console.WriteLine(_Jukebox2.Id); //ok
_Jukebox2.Source = "toto.mp3"; //doesn't do anything
}
}

添加StateHasChanged((；不工作

我做错了什么？

Answer 1

DOM中的组件是用这段代码创建的，您的组件将具有有效的@ref值

<AudioPlayer 
@ref=@_Jukebox2
Id="reactorAudioElement2"
</AudioPlayer>

但是您正在使用代码的这一部分在代码中创建另一个对象

_Jukebox2 = new AudioPlayer()
{
Id="reactorAudioElement2",
Source="/audio/Bleep_02.ogg"
};

在上面的代码中，您可以创建对象，但不能有DOM引用

这部分代码将在DOM中创建一个元素，并将其引用设置为_Jukebox 2，还将设置Source 的值

<AudioPlayer 
@ref=@_Jukebox2
Id="reactorAudioElement2"
Source="@source"
</AudioPlayer>
private string source="Source="/audio/Bleep_02.ogg"`;

在后面的代码中，您应该能够访问_Jukebox 2中的公共方法或变量，如

_Jukebox.Source="toto.mp3";

若并没有更新DOM，那个么问题可能在的其他地方