如何在Blazor Server应用中为任意HTML标签实现类似Angular ng-if的控件属性？

我太懂这种感受了！从AngularJs转Blazor的时候，习惯了把ng-if直接怼在标签上，突然要改成@if嵌套代码块，总觉得多写了好几行，有点不爽对吧？别担心，有几种办法能帮你实现类似的效果，我给你拆解一下：

方法一：自定义全局属性指令（最贴近ng-if的体验） #

这是最能还原你熟悉的Angular写法的方案——自己实现一个可以作用于任意HTML标签的条件渲染属性，一次定义全项目通用。

首先，在你的项目里创建一个自定义指令类，比如放在Directives目录下：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

[AttributeUsage(AttributeTargets.All, Inherited = true, AllowMultiple = false)]
[HtmlTargetElement("*", Attributes = "condition")]
public class ConditionDirective : ComponentBase
{
    [Parameter]
    public bool Condition { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        if (Condition)
        {
            // 提取当前使用的HTML标签名（比如div、p、button等）
            var tagName = AdditionalAttributes?["__internal_tag_name"] as string ?? "div";
            builder.OpenElement(0, tagName);
            
            // 传递标签上的其他所有属性（排除我们的自定义condition属性）
            foreach (var attr in AdditionalAttributes ?? new Dictionary<string, object>())
            {
                if (attr.Key != "condition" && attr.Key != "__internal_tag_name")
                {
                    builder.AddAttribute(1, attr.Key, attr.Value);
                }
            }
            
            // 渲染标签内部的子内容
            if (ChildContent != null)
            {
                builder.AddContent(2, ChildContent);
            }
            builder.CloseElement();
        }
        // 条件不满足时，完全不生成该标签的DOM节点，和ng-if行为一致
    }
}

然后在项目根目录的_Imports.razor文件里导入这个指令的命名空间，比如：

@using YourProjectName.Directives

接下来你就可以像用ng-if一样，直接在任意HTML标签上写condition属性了：

<div condition="@ShouldShowWelcome">欢迎使用Blazor Server应用！</div>
<button condition="@IsAdmin" class="btn-danger">删除数据</button>
<p condition="@HasUnreadMessages">您有@UnreadCount条未读消息</p>

这里的ShouldShowWelcome、IsAdmin都是你页面里定义的布尔类型变量，完全和Angular的用法逻辑一致！

方法二：紧凑版原生写法（无需自定义指令） #

如果不想额外写指令代码，其实可以用Blazor原生的@if写得更紧凑一点，减少嵌套的视觉负担：

@if (ShowElement) { <div>这是只有ShowElement为true时才会存在的内容</div> }

虽然还是用到了@if，但把标签和判断写在同一行，视觉上和直接写在标签里的体验差不多，而且是Blazor原生支持的写法，不用额外维护指令代码。

另外要区分一下：

• 如果你要的是ng-if的效果（元素完全从DOM移除），就用上面的@if紧凑写法或者自定义指令；
• 如果是ng-show/ng-hide的效果（元素保留在DOM中，仅隐藏），可以用内联样式快速实现：

  <div style="@(IsVisible ? "display:block" : "display:none")">我会一直存在在DOM里，只是可能看不见</div>
  

最后补充两句 #

不管用哪种方式，Blazor的渲染性能都不用担心——原生@if是编译器优化过的，自定义指令的性能和它相差无几。如果项目里很多地方都需要这种写法，自定义指令肯定是更省心的选择，一次配置全项目通用；如果只是偶尔用用，紧凑版的原生写法足够了。

内容来源于stack exchange