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

【问题标题】：How to Remove Element / Component from BlazorWebassambly如何从 BlazorWebassambly 中删除元素/组件
【发布时间】：2021-07-20 17:57:22
【问题描述】：

我正在尝试制作一个 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();
    }
}

【问题讨论】：

听起来像一个简单的 Blazor if 语句可以在这里从 DOM 中删除 div 和段落，或者您是否有理由尝试删除组件本身？顺便说一句，我不相信可以从组件本身内部执行此操作 - 您必须在该组件的调用标记存在的父级别执行此操作。

标签： razor components blazor element

【解决方案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。当 is 计算为 false 时，它会从 DOM 中移除。

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

【讨论】：