Angular 7异步数据展示：innerHTML安全解析HTML的空值处理问题

嘿，这个问题我碰到过好多次了！Angular模板里调用方法时用可选链确实容易踩这个小坑，不过有几个简单靠谱的解决方案：

方案1：空值合并+可选链，快速解决 #

直接在方法参数里用o?.description ?? ''，当o是undefined或者description不存在时，自动替换成空字符串，这样传给 sanitizer 的就不会是undefined了：

<p class="desc" [innerHTML]="sanitizer.bypassSecurityTrustHtml(o?.description ?? '')"></p>

这个方式最轻巧，不需要额外改组件逻辑，适合快速修复单个场景。

方案2：用*ngIf做守卫，最稳妥 #

如果不想渲染空的p标签，或者要处理默认内容，直接给元素加*ngIf="o"，确保只有o存在时才渲染这个节点：

<p *ngIf="o" class="desc" [innerHTML]="sanitizer.bypassSecurityTrustHtml(o.description)"></p>

要是需要在o没加载出来的时候显示提示，还可以加个else模板：

<ng-template #noDescription>
  <p class="desc">暂无描述信息</p>
</ng-template>
<p *ngIf="o; else noDescription" class="desc" [innerHTML]="sanitizer.bypassSecurityTrustHtml(o.description)"></p>

方案3：封装自定义管道，长期复用（推荐） #

如果你的项目里很多地方都需要处理带HTML的字段，不如写个自定义管道，把 sanitize 逻辑和空值处理封装起来，以后用起来超省心：
先创建管道文件：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string | undefined): SafeHtml {
    // 处理undefined，默认返回空字符串的安全HTML
    return this.sanitizer.bypassSecurityTrustHtml(value || '');
  }
}

别忘了在对应模块里声明这个管道，然后模板里直接用：

<p class="desc" [innerHTML]="o?.description | safeHtml"></p>

这样不管o有没有加载完成，都不会报错，代码还更简洁！

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