ngPreserveWhitespaces 不起作用（Angular 15/17）

Question

了解有关在 Angular 中保留空格的信息：https://angular.io/api/core/Component#preserving-whitespace

但由于某种原因，我无法使用 ngPreserveWhitespaces 将它们保留在模板中 即使添加

preserveWhitespaces: true

也不会改变任何事情。

这是 stackblitz 示例

https://stackblitz.com/edit/angular-gaal3c?file=src%2Fmain.ts

我做错了什么吗？

Answer 1

如果你检查该文本的元素并双击它，你会发现空格实际上没有被删除，至于为什么你看不到空格，是因为CSS。

空白

正常（默认）

空白序列被折叠。源中的换行符的处理方式与其他空格相同。线条被打破为 需要填写行框。

停止折叠的方法，您可以设置空白属性以使用以下任何样式，其中

Spaces and tabs

设置为

preserve

（例如：

pre

）

空	新线路	空格和制表符	文字换行	行尾空格	**行尾其他空格分隔符**	****	****	****	****
正常	崩溃	崩溃	包裹	删除	挂
现在整理	崩溃	崩溃	无包装	删除	挂
前	保存	保存	无包装	保存	无包装
预包装	保存	保存	包裹	挂	挂
预上线	保存	崩溃	包裹	删除	挂
换行符	保存	保存	包裹	包裹	包裹

ts

import 'zone.js';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div ngPreserveWhitespaces style="white-space: pre">
    whitespaces   are    preserved                here
    <span>    and here </span>
</div>
    <div ngPreserveWhitespaces style="white-space: break-spaces">
    whitespaces   are    preserved                here
    <span>    and here </span>
</div>
  `,
  preserveWhitespaces: true,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

堆栈闪电战