Angular12中DomSanitizer.bypassSecurityTrustHtml处理null值输出异常

这个行为是Angular 12版本迭代中DomSanitizer的处理逻辑变更导致的：

• Angular 11及更早版本中，bypassSecurityTrustHtml方法接收null/undefined入参时，内部会将其处理为空值，绑定到innerHTML属性时不会渲染任何可见内容
• Angular 12版本开始，该方法的入参处理逻辑调整，null/undefined会被先转为字符串"null"再封装为SafeHtml对象返回，所以最终页面会直接渲染出null文本

另外你当前的管道代码存在类型不严谨的问题：transform方法的入参声明为string类型，但实际使用时传入了null，如果开启TypeScript严格空值校验会直接抛出类型错误，也建议同步修复。

直接修改自定义sanitizeHtml管道，提前处理空值即可：

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private _sanitizer:DomSanitizer) {}

  // 先扩展入参类型支持空值，返回值也对应支持null
  transform(v: string | null | undefined): SafeHtml | null {
    // 空值直接返回null，不会渲染任何内容
    if (v == null) return null;
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

如果不想改动管道代码，也可以在模板绑定处增加空值 fallback：

<span [innerHTML]="(yourContent | sanitizeHtml) ?? ''"></span>

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