如何避免Angular中HTML元素后自动输出多余空格？

你遇到的是Angular模板解析时自动合并空白字符导致的问题，以下几种方法可以解决：

方法一：紧凑书写模板代码 #

把<strong>结束标签和逗号直接连在一起，中间不要留任何空格或换行，这样Angular就不会生成多余空格：

<strong>{{ lastname | uppercase }}</strong>, {{ firstname }}

这种方法最简单，适合只需要处理单个地方的场景。

方法二：通过字符串拼接+innerHTML渲染 #

在组件中定义一个计算属性，直接拼接好包含加粗标签的完整字符串，再用innerHTML绑定到模板中：

// 组件类代码
get formattedFullName(): string {
  return `<strong>${this.lastname.toUpperCase()}</strong>, ${this.firstname}`;
}

模板中使用：

<span [innerHTML]="formattedFullName"></span>

这种方式完全由你控制字符串内容，不会出现意外的空白，注意如果姓氏包含用户输入的内容，要确保做了XSS防护（Angular的innerHTML会自动处理安全的HTML，但仍需注意不可信内容）。

方法三：关闭组件的空白保留 #

在组件装饰器中设置preserveWhitespaces: false，Angular会自动移除模板中的多余空白字符：

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  preserveWhitespaces: false
})
export class YourComponent {}

这个设置对整个组件的模板生效，适合需要统一处理多处空白的场景，但要注意如果有需要保留空白的地方（比如文本中的空格），可能需要用 替代。

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