如何从 BlazorWebassambly 中删除元素/组件

Question

我正在尝试制作一个 Razor 组件，该组件在添加到页面后 3 秒后将自身从页面中删除。

我会点击一个按钮
比组件将被添加到当前页面
3 秒后组件从页面中删除自身

<**div @ref="messageRef" style="position: absolute; margin: 0 auto; background-color: red; width: 200px; height: 80px;">**

    <p>Message.....</p>
</div>

@code {
    ElementReference messageRef;

    private MessageComponent thisMsg;
    protected override async Task OnInitializedAsync()
    {
        await JSRuntime.InvokeVoidAsync("MessageComponent.Remove()", messageRef); 
        StateHasChanged();
    }
}

Answer 1

正如 JeremyW 在他的评论中提到的，这可以通过在包含内容的页面正文中的 @if 语句来完成。以 Blazor 模板应用为例，它可能看起来像这样：

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

@if (displayPrompt)
{
    <SurveyPrompt Title="How is Blazor working for you?" />
}

@code {
    private bool displayPrompt;

    protected override void OnInitialized()
    {
        displayPrompt = true;
        HideMessageAfterDelay();
        base.OnInitialized();
    }

    private async void HideMessageAfterDelay()
    {
        await Task.Delay(3000);
        displayPrompt = false;
        StateHasChanged();
    }
}

当 displayPrompt 计算为 true 时，提示被添加到 DOM。当计算结果为 false 时，它会从 DOM.

中删除

如果您需要消息组件自行处理，则只需将等效代码放在组件本身而不是页面中。

如何从 BlazorWebassambly 中删除元素/组件

How to Remove Element / Component from BlazorWebassambly

components

element

razor

blazor