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

Question

I'm calling a part of a table from a razor component to a component that can be viewed. But the the problem is that there is an audio element i want to separate so it can be called at a different place.

Right now the audio element is included in the call in the loop. Is there any way the audio element can be separated in the CallComponent.razor , such that it can be called at a different loaction in index.razor ?

Here is some code:

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

Here is one way, there are other ways involving various ways to handle application state, but this demonstrates possibly the simplest.

Index.razor

@childMarkup

<Component1 ExtraMarkup=@( em => childMarkup = em) />

@code 
{
    RenderFragment childMarkup;
}

Component1.razor

<h1>Component1</h1>

@code 
{
    [Parameter] public EventCallback<RenderFragment> ExtraMarkup { get;set;}

    protected override void OnInitialized()
    {
        ExtraMarkup.InvokeAsync( @<div>I am extra markup</div> );
    }
}

In this example, Component1 has a parameter that takes an EventCallback<RenderFragment> - in other words, you give it a method that accepts a RenderFragment and Component1 will call your method supplying it with some markup. Here we just store the incoming RenderFragment in a local field - which is then rendered in the parent markup.

Try it: https://blazorrepl.telerik.com/cQbPGRPT48cbMaCe55

Answer 2

It is not really clear what you want to achieve. Have you looked into @ref That way you can reference you Razor child component elsewhere.