Angular 15/17中ngPreserveWhitespaces不生效，求排查指导

• 首先要理清一个关键区别：Angular的preserveWhitespaces配置和ngPreserveWhitespaces指令，只是阻止Angular编译器移除模板中的空白字符，但浏览器本身会默认合并连续空格、换行符为单个空格，这是HTML的原生行为，和Angular无关。

• 你当前操作可能存在的遗漏点：

  • 若要保留连续空格或换行格式，仅靠Angular的配置不够，必须配合CSS的white-space属性。比如给需要保留空格的元素添加：

    white-space: pre-wrap;
    

    这个属性会保留连续空格和换行，同时允许内容自动换行；如果需要严格按照模板里的格式显示（不自动换行），可以用white-space: pre;。
  • 检查组件配置是否正确：确保preserveWhitespaces: true是写在@Component装饰器的元数据中，比如：

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      preserveWhitespaces: true
    })
    

  • 确认ngPreserveWhitespaces指令的作用范围：需要将它放在直接包裹目标内容的元素上，而非无关的父级容器。

• 举个直观的例子：模板中写<div ngPreserveWhitespaces>Hello World</div>，Angular不会移除中间的空格，但浏览器仍会显示成单个空格；给该div加上white-space: pre-wrap;后，就能看到多个空格的效果了。

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