Angular中如何在ngIf中判断SafeHtml是否为null以隐藏div？

问题背景 #

• 业务需求：当类型为SafeHtml的query属性值为null时，隐藏绑定该值的div元素
• 异常表现：使用*ngIf="query != null"的判断逻辑完全失效，即使query为空，对应div依然会正常渲染
• 项目已引入相关依赖：import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

判断失效的核心原因 #

Angular 的DomSanitizer在执行bypassSecurityTrustHtml处理时，不会将输入的null值直接透传为原生null返回：只要调用了该方法，哪怕传入的参数是null、空字符串，最终输出的都是一个非空的SafeHtml包装类实例。
此时在模板中直接拿这个包装实例和null做比较，结果永远为false，判断逻辑自然不会生效。

可落地的正确实现方法 #

• 方法1：调整赋值逻辑，从源头保证空值时query为原生null
  不要对原始空内容直接调用sanitizer的转换方法，先判断原始内容是否非空，再决定是否生成SafeHtml实例：

  // 错误写法：不管原始内容是否为空，直接调用sanitizer转换
  // this.query = this.sanitizer.bypassSecurityTrustHtml(this.rawContent)
  // 正确写法：先做空值判断，空值直接返回原生null
  this.query = this.rawContent 
    ? this.sanitizer.bypassSecurityTrustHtml(this.rawContent) 
    : null;
  

  按这种写法赋值后，原本的*ngIf="query != null"就可以正常生效。
• 方法2：如果无法调整赋值逻辑，直接判断SafeHtml内部存储的实际内容
  所有SafeHtml包装对象都会在changingThisBreaksApplicationSecurity属性中存储实际的原始内容，判断时直接基于这个属性判断即可，不需要和null做对象级比较：

  <div *ngIf="query && query.changingThisBreaksApplicationSecurity">
    <!-- 绑定的动态HTML内容 -->
  </div>
  

  哪怕是sanitizer包装的空内容，这个属性的值也会是空字符串，判断逻辑可以准确识别空值场景。

注意事项 #

• 不要尝试直接将SafeHtml对象和原生null做比较，只要是经过sanitizer转换生成的SafeHtml实例，就永远是非空的对象，不存在等于null的可能。
• 这个失效场景是开发中的高频踩坑点：Angular为了避免渲染空内容时抛出异常，会对sanitizer方法的所有输入（哪怕是null）都返回包装实例，不会透传原始null值，因此直接做null比较永远不会命中空值场景。
• 不建议在模板中堆叠过多复杂的边界判断逻辑，优先在组件ts代码层面做好值的合法性校验，从源头减少模板里的异常判断分支。

内容的提问来源于stack exchange，提问作者200_OK