Ionic 5点击按钮调整innerHTML字体大小及移除空白字符问题

问题根因 #

1. {{contents}} 插值语法会把内容作为纯文本渲染，不会解析HTML标签，所以会直接展示br>、 等字符，同时你将DomSanitizer返回的安全值对象直接作为文本插值，才会触发「Safe value must use [property]=binding」提示。
2. 重复的id="p"会导致DOM选择器异常，如果你原有ChangeFontSize方法是通过getElementById操作DOM，只会命中第一个插值的<p>标签，[innerHtml]对应的标签不会被修改。
3. [innerHtml]渲染的内容是标签的子DOM节点，如果你的字号规则只作用在父级<p>标签，没有规定子节点继承字号，就会出现子元素字号不生效的问题。

可行解决方案 #

步骤1：清理冗余代码，避免ID重复

删除使用插值语法的<p id="p">{{contents}}</p>代码，仅保留[innerHtml]渲染的标签，修正重复ID问题：

<div class="container">
  <div>
  <ion-button (click)="ChangeFontSize('increase')"> A+ </ion-button>
  <ion-button (click)="ChangeFontSize('decrease')"> A- </ion-button>
  </div>

  <h1 id="h"> {{product.title}}</h1>

  <!-- 仅保留这一个内容渲染标签 -->
  <p class="content-p" [innerHtml]="contents"></p>
</div>

步骤2：使用CSS变量实现动态字号适配

这是最高效的适配方案，无需操作DOM，自动生效到innerHtml渲染的所有子内容：

1. 组件ts中定义字号变量，修改ChangeFontSize逻辑：

// 定义默认字号，单位可自定义
defaultFontSize = 16;

ChangeFontSize(type: 'increase' | 'decrease') {
  if (type === 'increase' && this.defaultFontSize < 24) { // 可加最大字号限制
    this.defaultFontSize += 2;
  } else if (type === 'decrease' && this.defaultFontSize > 12) { // 可加最小字号限制
    this.defaultFontSize -= 2;
  }
}

2. 给innerHtml的父标签绑定CSS变量：

<p class="content-p" 
  [style.--content-font-size]="defaultFontSize + 'px'"
  [innerHtml]="contents"></p>

3. 组件样式中添加继承规则，确保innerHtml渲染的所有子元素都继承字号：

.content-p, .content-p * {
  font-size: var(--content-font-size) !important;
  /* 可选：额外清理多余空白的样式 */
  white-space: pre-line;
  margin: 0;
  padding: 0;
}

可选步骤：提前清理内容中的冗余字符

如果需要进一步清理description中不需要的HTML实体或标签，可以在调用安全校验前处理原始字符串：

let rawDesc = this.product['description']
  // 替换多余的 为普通空格
  .replace(/ /g, ' ')
  // 可根据需求删除不需要的标签，比如多余的br
  .replace(/<br\s*\/?>/gi, '\n')
  .trim();
this.contents = this.sanitizer.bypassSecurityTrustHtml(rawDesc);

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