如何阻止Angular 12自动将空格字符替换为 ？

Angular 默认的文本插值{{}}本身不会将普通空格转换为 ，出现这个问题通常是数据源、全局配置、第三方依赖三个方向的问题，对应解决方案如下：

排查前置步骤 #

先做简单测试缩小问题范围：在application-card.component.html中写入固定文本做对照，代码如下：

<div class="app-card-body">
  This is static test string
  {{application.description}}
</div>

打开页面检查元素，如果静态文本的空格是正常普通空格，只有application.description的空格被转成 ，说明问题出在传入的数据源上；如果静态文本也被转换，说明是全局配置/第三方依赖导致的问题。

解决方案1：手动替换非断空格后绑定（最高优先级） #

你可以通过DomSanitizer处理字符串，主动把所有非断空格（ 对应的Unicode字符为\u00A0）替换为普通空格后再渲染，操作步骤如下：

1. 修改application-card.component.ts，引入DomSanitizer并添加处理方法：

import { Component, Input, OnInit } from '@angular/core';
import { Application } from 'src/app/services/apps.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-application-card',
  templateUrl: './application-card.component.html',
  styleUrls: ['./application-card.component.css']
})
export class ApplicationCardComponent implements OnInit {

  @Input() application: Application;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    console.log(this.application.description);
  }

  getFormatDescription(): SafeHtml {
    // 将所有非断空格替换为普通空格后返回安全HTML
    const rawDesc = this.application.description.replace(/\u00A0/g, ' ');
    return this.sanitizer.bypassSecurityTrustHtml(rawDesc);
  }

}

2. 修改application-card.component.html的绑定方式：

<div class="app-card-body" [innerHTML]="getFormatDescription()"></div>

解决方案2：排查数据源/全局拦截逻辑 #

如果解决方案1生效，说明原始的description字段本身就隐含非断空格，建议排查以下两个位置：

• 后端接口返回的原始数据：打开浏览器控制台-网络面板，查看对应接口返回的description字段是否已经包含非断空格
• 前端HTTP拦截器：检查项目中所有HTTP interceptor代码，是否存在全局替换空格为 的逻辑

解决方案3：排查第三方依赖/浏览器扩展影响 #

如果前置测试中静态文本也被转换为 ，排查以下内容：

• 项目是否引入了富文本处理、文本翻译类的第三方依赖，是否配置了自动空格转换的逻辑
• 关闭所有浏览器扩展，使用无痕模式打开页面测试，排除翻译、广告拦截类扩展修改DOM的可能

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