从ng-container内容中剥离的空格字符

Question

从Angular 5升级到6后，以下内容不再按预期渲染。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
</ng-container>

过去的情况是，这些标签会出现在一行中，直到它们到达末尾，然后继续下一行(不会在标签中间中断)。

我使用ng-container是因为仅仅将ng-for放在span中并不会在标记后面添加CR/LF，而且会呈现在没有换行的连续行中。

然而，最新版本似乎删除了标签之间的所有空格字符，即使我手动添加它们，例如：

它具有未呈现的HTML编码的CRLF

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#13;&#10;
</ng-container>

这在<span>元素之间有明确的换行符，但这些不会出现在呈现的输出中。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    <span> </span>
</ng-container>

有一些可能与以下内容相关的样式：

span.email-tag {
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

如果我手动编辑DOM并添加一个CRLF，甚至只添加一个空格，我就会得到我想要的结果。

我怀疑这是为了修复某个地方的问题而更改的，但是对于如何实现预期的结果，有人有什么建议吗？

Answer 1

默认情况下，Angular 6启用空格优化。升级后，我注意到图标和文本之间的空格消失了。

您可以通过在tsconfig.app.json中设置preserveWhitespaces选项来全局覆盖此选项(如果您正在使用Angular CLI)：

"angularCompilerOptions": {
    "preserveWhitespaces": true
}

或者基于每个组件，使用装饰器：

@Component({
    selector: 'floor-plan',
    templateUrl: './floor-plan.component.html',
    styleUrls: ['./floor-plan.component.scss'],
    preserveWhitespaces: true
})
export class FloorPlanComponent implements OnInit, OnDestroy {
    ...

有关详细信息，请参阅：

文档：https://angular.io/api/core/Component#preserveWhitespaces

说明：http://thomasgassmann.net/whitespace-handling-in-angular-6/

Answer 2

这里有人甚至在我点击“提问”之前就给了我一个变通的办法。

我所做的是在内容中添加一个宽度为零的空格。出于某些原因(我非常感谢！)Angular不会像现在处理空格那样从容器内容中剥离它，因此输出会按预期呈现。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#8203;
</ng-container>