如何分离从一个剃刀组件发送到另一个组件的 html 代码？

Question

我正在将表的一部分从剃刀组件调用到可以查看的组件。但问题是我想分离一个音频元素，以便可以在不同的地方调用它。

现在，音频元素包含在循环中的调用中。有什么方法可以在CallComponent.razor 中分离音频元素，以便可以在index.razor 中的不同位置调用它？

这是一些代码：

Index.razor

//I want to call the separated audio element here

...
<tbody>
        @foreach (var fileGroup in GroupedAndSorted)
        {
            <CallComponent fileGroup="fileGroup" /> 
        }
</tbody>
...

CallComponent.razor

<audio src="@audioUrl" controls>
</audio>

<tr>
    <td>
        <a @onclick="@(() => PlayAudio(Mp3.Url))"
                       class="link-primary"
                       role="button">
        @fileGroup.Key
        </a>
    </td>
</tr>
...

Answer 1

目前还不清楚你想要实现什么。您是否查看过@ref 这样您就可以在其他地方引用您的 Razor 子组件。